Cassi: AI 기반 CSS 스타일 가이드 생성기

Cassi: AI 기반 CSS 도우미

Cassi는 기존 CSS 파일에서 마크다운 기반 문서를 생성하도록 설계된 AI 기반 도구입니다. AI 모델을 활용하여 각 CSS 규칙에 대한 의미 있는 정보를 생성합니다. 이 프로세스를 사용하면 복잡한 스타일시트를 문서화하는 것이 훨씬 쉬워집니다.

대규모 CSS 프로젝트 문서화의 과제

여러 파일에 분산되어 있는 CSS 규칙이 많은 프로젝트를 작업하는 것은 어려울 수 있습니다. 기존 도구는 구성 요소 라이브러리에 중점을 두는 경우가 많으며 규칙에 주석을 추가해야 하거나 오래되어 원시 CSS 스타일을 효과적으로 문서화하기 어렵습니다.

기존 CSS 파일을 분석하고 각 규칙에 대한 마크다운 기반 문서를 생성하여 이 문제를 해결하기 위해 Cassi를 만들었습니다.

카시의 주요 특징

Cassi를 강력한 도구로 만드는 이유는 다음과 같습니다.

1. 로컬 또는 클라우드 AI 통합
   • 오픈 소스 모델을 로컬에서 사용하거나 OpenAI 또는 Anthropic 모델과 같은 호스팅 AI 서비스에 연결하세요.
2. 마크다운 기반 문서 출력
   • 11ty 호환 머리말이 포함된 풍부한 마크다운 기반 문서를 생성합니다.
3. 맞춤형 템플릿
   • 필요에 따라 출력을 조정하려면 프롬프트 템플릿을 편집하세요.
4. 원활한 통합
   • Markdown 출력은 11ty 또는 기타 문서 플랫폼과 같은 도구에서 쉽게 작동합니다.

카시의 작동 방식

이 글을 쓰는 시점에서 Cassi는 Node JS 스크립트와 프롬프트 템플릿에 지나지 않습니다. 나중에 더 많은 기능을 추가할 계획이 있습니다. 지금은 어떻게 작동하는지 살펴보겠습니다.

1. CSS 파싱

   • 제공된 glob 패턴을 기반으로 CSS 파일을 읽습니다.
   • CSS 규칙을 구문 분석하여 선택기와 선언을 추출합니다.

2. AI 기반 마크다운 생성

   • 문서 생성을 위해 신중하게 제작된 프롬프트와 함께 각 규칙을 AI 모델에 보냅니다.

3. 마크다운 문서 작성

   • AI 모델의 응답을 이용하여 각 규칙에 대한 마크다운 파일을 생성합니다.

보시다시피 프로세스는 비교적 간단하며 현지 모델과 작업할 때 올바른 프롬프트를 통해 무엇을 얻을 수 있는지 보여줍니다.

예제 출력

다음은 Ollama에서 qwen2.5-coder를 사용하여 Cassi가 생성한 마크다운 출력의 예입니다.

 ---
    title: ".btn-primary에 대한 스타일 지정"
    태그: ["CSS", "스타일", "선택기"]
    고유 링크: "/styles/btn-primary/"
    shortDescription: "중요한 작업을 강조하기 위한 기본 버튼 스타일입니다."
    선택기:
    - ".btn-기본"
    ---

    ## 개요

    `.btn-primary` 규칙은 눈에 띄는 버튼의 기본 스타일을 정의하며 일반적으로 "제출" 또는 "저장"과 같은 중요한 작업 호출에 사용됩니다.

    ## 용법

    HTML에서 이 규칙을 사용하는 방법은 다음과 같습니다.

    ````

HTML
    



<h2>
  
  
  GitHub 저장소
</h2>

<p>코드를 보거나 직접 사용해 보거나 도구 개선에 도움을 주고 싶다면 GitHub itlackey/cassi에서 Cassi 저장소를 찾을 수 있습니다.</p>

<h2>
  
  
  Cassi의 다음 단계는 무엇입니까?
</h2>

<p>Cassi는 제가 현재 겪고 있는 문제를 해결하기 위해 만들어졌습니다. 이제 팀에 필요한 문서를 쉽게 생성할 수 있으므로 워크플로를 더욱 개선하기 위해 몇 가지 기능을 추가하는 데 집중할 수 있습니다. 추가를 고려 중인 몇 가지 기능은 다음과 같습니다.</p>

• 11ty 스타터 키트 - Cassi가 포함되어 있고 Cassi가 생성한 파일에서 스타일 가이드를 생성하도록 사전 구성된 11ty 프로젝트입니다.
• 적절한 CLI 문서 생성을 위한 cassi generate styles/*.css --output-dir docs, cassi 다운로드 http://some.site와 같은 구문을 허용하여 URL에서 CSS 파일을 다운로드하거나 cassi 빌드를 11ty를 사용하여 스타일 가이드를 생성합니다.
• 증분 업데이트 - Cassi가 어떤 CSS가 추가/수정되었는지 확인하고 그에 따라 마크다운 문서를 추가/업데이트할 수 있도록 논리를 추가합니다.
• 스타일 그룹화 - 더 쉬운 탐색을 위해 사용자가 CSS 규칙을 카테고리나 섹션으로 그룹화할 수 있습니다.

최종 생각

CSS 문서화는 시간이 많이 걸리는 수동 프로세스일 필요가 없습니다. Cassi는 사용, 통합 및 사용자 정의가 쉬운 풍부한 마크다운 기반 문서를 빠르게 생성할 수 있습니다.

어떻게 생각하시나요? Cassi가 귀하의 프로젝트에 유용할까요? 아래 댓글로 알려주세요!

위 내용은 Cassi: AI 기반 CSS 스타일 가이드 생성기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!