사용 가이드로 건너뛰기
Beautiful Article작성자 ConardLi

Beautiful Article 스킬.

대시보드로 만들지 않고, 읽을 가치가 있는 문서를 만드세요.

  • 에디토리얼 디자인
  • HTML
  • 롱폼
원본 검토 · Beautiful ArticleSKILL.md
작업 에디토리얼 디자인 산출물 • 스타일과 스크립트가 인라인으로 포함된 독립형 article.html • 추출된 원본 Markdown과 추출 품질에 관한 메모 • 아티클의 편집 계획과 검토를 거친 첫 스프레드 시작하기 전에 문서화된 빌드는 Node/npm, Vite, React, TypeScript, Reacticle을 사용합니다. 문서 추출과 선택적 PDF 출력에는 추가 도구가 필요할 수 있으며, 생성 이미지는 별도로 사용할 수 있는 백엔드가 필요합니다.
편집 요약 · 원본 검토일 2026-10-07 · 생성된 예시 아님

01 기능 소개

Beautiful Article

추출, 아티클 기획, 첫 스프레드 승인, 전체 구성, 오프라인 전달을 분리한 편집 파이프라인입니다.

원본 기반 워크플로실행 벤치마크 아님

작업 방식

Beautiful Article은 ConardLi의 원본-아티클 워크플로입니다. 아티클 URL, Markdown, 문서, PDF, 스크린샷처럼 이미 가진 자료에서 시작합니다. 의도한 결과물은 짧은 마케팅 요약이 아니라 롱폼 읽기 경험입니다. 추출된 원본 자료는 빌드 내내 남겨 두어 사실, 예시, 기술 세부 사항을 확인할 수 있습니다.

핵심은 전체 아티클을 만들기 전에 첫 스프레드를 검토한다는 점입니다. 커버, 도입 섹션, 대표 시각 블록이 콘텐츠가 어떻게 읽힐지 정합니다. Reacticle은 시맨틱 아티클 컴포넌트를 제공하며, 제한된 커스텀 레이어로 다이어그램이나 기타 읽기 보조 요소를 추가할 수 있습니다. 결과물은 독립형 HTML 파일이며, PDF는 기본값이 아니라 요청 시 제공되는 별도 출력입니다.

예상 산출물

  • 스타일과 스크립트가 인라인으로 포함된 독립형 article.html
  • 추출된 원본 Markdown과 추출 품질에 관한 메모
  • 아티클의 편집 계획과 검토를 거친 첫 스프레드
예시 브리프 보기

브리프에서 검토까지

  1. 01
    원본 복구

    제공된 자료를 추출하고 누락되었거나 불확실한 내용을 기록합니다. 어려운 PDF와 스크린샷은 텍스트가 아티클의 토대가 되기 전에 특히 주의가 필요합니다.

  2. 02
    읽기 경험 기획

    빌드 전에 아티클 유형과 그 정보 보존 수준, 테마, 레이아웃 너비, 이미지 방식, 커버에 대해 사용자 결정을 각각 따로 받습니다. 기본값은 정보 전체 보존이며, 합의된 축소는 계획에 기록합니다.

  3. 03
    첫 스프레드 검토

    승인된 커버, 도입 섹션, 대표 시각 블록을 만듭니다. 독립된 리뷰어 에이전트의 점검을 받은 뒤 멈추고, 사용자가 샘플을 승인하고 순차 개발 또는 병렬 개발을 선택하도록 합니다.

  4. 04
    완성 및 패키징

    각 섹션과 완성된 아티클을 검토하고 문제를 고친 뒤, 오프라인 HTML 내보내기 전에 최종 전달 결정을 받습니다. 첫 스프레드와 최종 검토는 가능하면 독립 에이전트가 수행하며, 메인 에이전트로 대체했다면 이를 밝혀야 합니다. PDF는 요청된 경우에만 내보냅니다.

02 활용 상황

사용 시점

문서화된 빌드는 Node/npm, Vite, React, TypeScript, Reacticle을 사용합니다. 문서 추출과 선택적 PDF 출력에는 추가 도구가 필요할 수 있으며, 생성 이미지는 별도로 사용할 수 있는 백엔드가 필요합니다.

잘 맞는 경우

  • 기술 설명 자료코드, 수식, 표, 비교 내용을 슬라이드식 카드로 압축하지 않고 본문과 함께 읽기 좋게 유지해야 할 때 유용합니다.
  • 휴대 가능한 읽기용 사본개발 서버 없이 하나의 HTML 파일로 열려야 하는 보고서나 에세이에 적합합니다.

확인할 한계

  • 애플리케이션 빌더가 아님원본은 이 워크플로를 대시보드, 폼, 일반 웹 애플리케이션, 제품 프로토타입과 명확히 구분합니다.
  • 자동 일러스트 아님외부 이미지와 생성 이미지는 의도적으로 선택하는 사항입니다. 이미지 없는 아티클도 이미지 서비스를 몰래 요청하지 않고 콘텐츠 기반 CSS 또는 SVG 설명을 사용할 수 있습니다.

준비할 입력

  • 원본 자료실제 문서나 접근 가능한 아티클과 함께, 변환 후에도 남아야 하는 섹션, 인용문, 그림을 제공하세요.
  • 독자와 목적튜토리얼, 브리핑, 리뷰, 에세이 중 무엇인지와 대상 독자의 사전 지식 수준을 밝혀 주세요.
  • 시각 자료 허용 범위제공된 에셋, 플레이스홀더, 생성 이미지, 이미지 없음 중에서 고르고, 브랜드 제약과 PDF 출력 필요 여부를 알려 주세요.

03 핵심 결정

중요한 결정

  1. 장식보다 콘텐츠

    아티클 구조가 바뀌어도 원본이 사실 기준으로 유지됩니다. 보기 좋은 레이아웃이 필요한 단서를 실수로 지웠는지 쉽게 알아챌 수 있습니다.

  2. 이른 단계의 읽기 샘플

    검토를 거친 첫 스프레드는 색상만이 아니라 실제 본문과 설명 블록을 시험합니다. 읽기 너비나 시각적 밀도의 변경을 모든 섹션을 만들기 전에 할 수 있습니다.

04 예시 브리프

구체적인 브리프로 시작하기

아래 예시 브리프는 테스트되지 않았습니다. 사용하기 전에 스킬의 설정을 확인하세요.

설정 검토

작성자의 저장소 패키지와 그 스크립트 및 참고 자료를 사용하세요. 원본은 프로젝트 스캐폴딩을 설명할 뿐, 검증된 범용 설치 명령을 제시하지 않습니다.

업스트림 원본 파일
https://github.com/ConardLi/garden-skills/blob/aaf9a82f5efd73e87cc0998edc398e75bfc35901/skills/beautiful-article/SKILL.md

문서화된 빌드는 Node/npm, Vite, React, TypeScript, Reacticle을 사용합니다. 문서 추출과 선택적 PDF 출력에는 추가 도구가 필요할 수 있으며, 생성 이미지는 별도로 사용할 수 있는 백엔드가 필요합니다.

하나의 산출물로 시작

스킬을 실행하기 전에 이 브리프의 범위, 원본 자료, 제약을 상황에 맞게 조정하세요.

예시 브리프
Beautiful Article을 사용해 첨부된 마이그레이션 가이드를 프런트엔드 엔지니어를 위한 오프라인 HTML 설명 자료로 만들어 주세요. 코드 예시와 호환성 주의 사항을 유지하고, 원본 언어를 보존하며, 생성 이미지는 사용하지 마세요. 읽기 구조를 계획하고, 아티클을 완성하기 전에 도입부와 비교 블록 하나가 담긴 첫 스프레드를 보여 주세요. HTML과 추출 메모를 전달하고, PDF는 아직 만들지 마세요.

결과 점검

실제 출력이 다음의 관찰 가능한 기준을 충족하는지 확인하세요.

  • 아티클을 오프라인에서 열어도 의도한 스타일과 인터랙션이 갖춰져 있습니다.
  • 필요한 예시와 주의 사항을 제공된 원본에서 추적할 수 있습니다.
  • 첫 스프레드와 이후 섹션이 읽기 쉬운 위계를 공유하며, 롱폼 본문을 반복적인 카드로 대체하지 않습니다.

OpenDesign은 코딩 에이전트를 위한 로컬 디자인 작업 공간을 제공합니다. 이 목록은 스킬이 번들로 포함되어 있다거나 외부 도구, 자격 증명, 소프트웨어 의존성이 포함된다는 뜻이 아닙니다.

05 출처 및 라이선스

원본 및 라이선스

이 페이지는 아래에 링크된 고정 원본 리비전을 설명합니다. 업스트림의 동작과 요구 사항은 바뀔 수 있습니다.

원본 소유자
ConardLi
라이선스
MIT
검토한 스냅샷
2026-10-07 · aaf9a82f5efd
편집 원본 요약
추출, 아티클 기획, 첫 스프레드 승인, 전체 구성, 오프라인 전달을 분리한 편집 파이프라인입니다.

링크된 원본을 바탕으로 OpenDesign이 직접 작성한 요약입니다. 저장소 스타는 날짜 기준의 인기 지표일 뿐 스킬 사용량이나 품질 점수가 아닙니다.

06 시작 전 질문

시작 전 질문

기본적으로 원본을 요약하나요?

아니요. 이 워크플로는 원본 정보를 유지하는 것을 우선합니다. 아티클 유형과 밀도에 따라 처리 방식이 달라질 수 있지만, 축약은 명시적인 편집 결정이어야 합니다.

아티클을 번역할 수 있나요?

번역을 요청할 수 있지만, 그렇지 않으면 원본 언어가 유지됩니다. 번역된 구절을 확인할 수 있도록 원문 자료를 따로 보관하세요.

PDF가 주된 산출물인가요?

아니요. 주된 산출물은 독립형 HTML입니다. PDF는 커버와 페이지 구성 처리를 포함한 별도의 인쇄 작업이 필요합니다.

OpenDesign

다음 디자인 반복을 위한 여유를 만드세요.

브리프, 원본 자료, 디자인 작업을 로컬 작업 공간에 함께 보관하세요. 워크플로에 추가하기 전에 스킬 자체의 설정을 확인하세요.

업스트림 원본 파일
https://github.com/ConardLi/garden-skills/blob/aaf9a82f5efd73e87cc0998edc398e75bfc35901/skills/beautiful-article/SKILL.md