에이전트로 쓰기
Claude Code · Cursor 가 Button 의 size 를 추측하지 않고 여기서 읽게 합니다 — 예제 코드 · props · 토큰 값까지.
이 사이트의 모든 페이지는 HTML 과 함께 평문 사본을 굽습니다. 사본에는 미리보기 대신 예제 원본이, props 표 대신 DS 소스 타입에서 뽑은 표가, 토큰 표 대신 발행된 값이 그대로 펼쳐져 있습니다. 에이전트가 읽는 것과 사람이 보는 것이 같은 데이터입니다.
한 줄로 시작
에이전트에게 이 단락을 그대로 붙여 넣습니다.
https://design.coldsurf.io/llms.txt 를 읽고 UI 는 @coldsurfers/surf-ui 로 짜줘.
컴포넌트를 쓰기 전에 그 페이지의 .txt 에서 props 와 예제를 확인해.무엇을 읽히나
| 주소 | 무엇 | 언제 |
|---|---|---|
/llms.txt | 색인. 링크가 아래 .txt 로 갑니다 | 에이전트가 링크를 따라갈 수 있을 때 |
/llms-full.txt | 사이트 전체를 한 파일로 | 컨텍스트에 통째로 넣을 때 |
/llms/components/button.txt | 페이지 하나 | 지금 쓰는 컴포넌트만 필요할 때 |
페이지 머리의 복사 버튼이 그 페이지의 사본을 클립보드에 담고, Open ▾ 이 같은 사본을
ChatGPT · Claude 에 열어 줍니다.
MCP
@coldsurfers/design-system-mcp 는 위 사본에 목록 · 검색 · 경로 검증을 얹은
MCP 서버입니다. 다른 데이터가 아닙니다. 레지스트리 설정은
시작하기 와 같습니다.
claude mcp add coldsurf-ds -- npx -y @coldsurfers/design-system-mcp| 툴 | 하는 일 |
|---|---|
discover_docs | 카테고리 구조와 문서 수. 먼저 부릅니다 |
list_docs | 제목 · 경로 · 한 줄 설명. category 로 좁힙니다 |
get_doc | 본문 하나 — 예제 코드 · props 표 · 토큰 값이 들어 있습니다 |
패키지는 문서 사본을 들고 있지 않고 이 사이트를 읽어옵니다. 번들했다면 발행 시점에 얼어붙어 소비자가 옛 문서를 최신인 줄 알고 읽습니다 — 틀린 문서보다 나쁜 건 틀린 줄 모르는 문서입니다.
소비 레포의 AGENTS.md
매번 프롬프트를 붙이지 않으려면 소비 레포의 AGENTS.md(또는 CLAUDE.md)에 적어 둡니다.
## UI
- 컴포넌트 · 토큰은 `@coldsurfers/surf-ui` 를 쓴다. 문서: https://design.coldsurf.io/llms.txt
- 컴포넌트를 쓰기 전에 `/llms/<경로>.txt` 에서 props 와 예제를 확인한다. 추측하지 않는다.
- 색 · 여백은 리터럴 대신 토큰(`vars` · `--surf-*`)을 쓴다.