Skip to main content
Glama

๐Ÿงญ ํ๋ฆ„๊ณผ ์šฐ์„ ์ˆœ์œ„

๐Ÿ” ๊ฒฐ์ •์  ์ •์  ๊ฒ€์‚ฌ

๐Ÿ–ฅ๏ธ ์‹ค์ œ ๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”

๐ŸŽฏ ์š”์†Œ ๋‹จ์œ„ ํ”ผ๋“œ๋ฐฑ

์ž‘์—… ํ๋ฆ„ S1S7 ๊ณผ ์ถฉ๋Œ ์šฐ์„ ์ˆœ์œ„ P0P7 ์„ ์ฝ”๋“œ์™€ ๋ฌธ์„œ์— ๊ฐ™์€ ๋‚ด์šฉ์œผ๋กœ ๊ณ ์ •ํ•ฉ๋‹ˆ๋‹ค

impeccable ์—”์ง„๊ณผ taste lint ๋กœ ์†Œ์Šค๋ฅผ ๊ฒ€์‚ฌํ•˜๊ณ  ์šฐ์„ ์ˆœ์œ„๋ฅผ ์ ์šฉํ•ด FAILยทWARNยทINFO ๋กœ ๋ƒ…๋‹ˆ๋‹ค

ํ—ค๋“œ๋ฆฌ์Šค ๋ธŒ๋ผ์šฐ์ €๋กœ ์—ฌ๋Ÿฌ ํญ์„ ๋ Œ๋”ํ•ด ์ฒซ ํ™”๋ฉด ์Šคํฌ๋ฆฐ์ƒทยท์ธก์ • ๊ทœ์น™ยท์ ‘๊ทผ์„ฑ ์Šค๋ƒ…์ƒท์„ ๋‚จ๊น๋‹ˆ๋‹ค

์„ ํƒ์žยท์ขŒํ‘œ๋กœ ์š”์†Œ ๋ฌถ์Œ(HTMLยท๊ณ„์‚ฐ ์Šคํƒ€์ผ 16๊ฐœยท์œ„์น˜)์„ ๋ชจ์•„ Design Feedback ์„ ์”๋‹ˆ๋‹ค

๋ชฉ์ฐจ

Related MCP server: ui-assert

๊ตฌ์กฐ

flowchart LR
	C["MCP ํด๋ผ์ด์–ธํŠธ<br/>(Claude Code ยท Codex ๋“ฑ)"] <-->|stdio| S["astrondesign<br/>๋„๊ตฌ 6๊ฐœ"]
	subgraph E["์—”์ง„"]
		I["impeccable<br/>์ฐธ๊ณ  ๋ฌธ์„œ + ํƒ์ง€ ์—”์ง„"]
		T["taste-skill<br/>draw ยท lint ยท ์ธก์ •"]
		U["UI UX Pro Max<br/>๊ฒ€์ƒ‰๊ธฐ(python)"]
		A["awesome-design-md<br/>๋ธŒ๋žœ๋“œ DESIGN.md 84"]
		B["playwright-core<br/>ํ—ค๋“œ๋ฆฌ์Šค ๋ธŒ๋ผ์šฐ์ €"]
	end
	S --> I & T & U & A & B
	S -->|์‚ฐ์ถœ๋ฌผ๋งŒ ๊ธฐ๋ก| O[("์ž‘์—… ํด๋”(cwd)/.astron-logs/astrondesign/")]
	B -.->|์™ธ๋ถ€ ์š”์ฒญ ๊ธฐ๋ณธ ์ฐจ๋‹จ| N(("๐ŸŒ ์™ธ๋ถ€ ๋„คํŠธ์›Œํฌ"))
  • ํ•˜๋„ค์Šค๋Š” ํ”„๋กœ์ ํŠธ ํŒŒ์ผ์„ ์“ฐ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ณ ์น˜๋Š” ์ผ์€ ์—์ด์ „ํŠธ๊ฐ€ ์ง์ ‘ ํ•˜๊ณ , ํ•˜๋„ค์Šค๋Š” ์ฝ๊ธฐยท๊ฒ€์‚ฌยท๋ Œ๋” ๊ฒฐ๊ณผ๋งŒ ๋ƒ…๋‹ˆ๋‹ค.

  • ์›๋ณธ 4์ข…์€ vendor/ ์— ์ˆ˜์ • ์—†์ด ๋“ค์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฌธ์„œ ์•ˆ์˜ ์‹คํ–‰ ์ง€์‹œ(node draw.mjs, python search.py ๋“ฑ)๋Š” ์ด ๋„๊ตฌ๋“ค๋กœ ๋Œ€์ฒดํ•ฉ๋‹ˆ๋‹ค(guides/precedence.md ๋Œ€์ฒดํ‘œ).

์ž‘์—… ํ๋ฆ„

design_guide ๋ฅผ topic ์—†์ด ๋ถ€๋ฅด๋ฉด ์‹œ์ž‘ ์•ˆ๋‚ด๊ฐ€ ๋‚˜์˜ค๊ณ , ํ๋ฆ„ ์ „๋ฌธ์€ guides/workflow.md ์— ์žˆ์Šต๋‹ˆ๋‹ค.

flowchart LR
	S1["S1 ์š”๊ตฌ ์ •๋ฆฌ<br/>surface ๊ฒฐ์ •"] --> S2{"S2 ๋ฐฉํ–ฅ"}
	S2 -->|persuade| D["design_direction"]
	S2 -->|operate ยท read ยท experience| Q["design_search"]
	D --> S3["S3 ๊ตฌํ˜„<br/>(์“ฐ๊ธฐ ์—์ด์ „ํŠธ)"]
	Q --> S3
	S3 --> S4["S4 ๊ฒ€์‚ฌ<br/>design_lint โ†’ design_render"]
	S4 --> S5["S5 ๋น„ํ‰<br/>critique ยท design_inspect"]
	S5 --> G{"FAIL ๋‚จ์Œ?"}
	G -->|"์˜ˆ (์ตœ๋Œ€ 3ํšŒ)"| S6["S6 ์ˆ˜์ •<br/>FAIL ์ƒ์œ„ 3๊ฐœ"]
	S6 --> S4
	G -->|์•„๋‹ˆ์˜ค| S7["S7 ๋ณด๊ณ <br/>FAILยทWARNยทINFO ํ‘œ"]

surface

๋Œ€์ƒ

์ ์šฉ ๊ทœ์น™

persuade

๊ณต๊ฐœ ๋žœ๋”ฉยท๋งˆ์ผ€ํŒ… ํŽ˜์ด์ง€

impeccable + taste + UI UX Pro Max

operate

๋Œ€์‹œ๋ณด๋“œยท์•ฑ ํ™”๋ฉด

impeccable + UI UX Pro Max

read

๋ฌธ์„œยท๊ธ€ ์ฝ๊ธฐ ํ™”๋ฉด

impeccable + UI UX Pro Max

experience

๋ชฐ์ž…ํ˜•ยท์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ํ™”๋ฉด

impeccable + UI UX Pro Max

์ฝ๊ธฐ ์ „์šฉ ์—์ด์ „ํŠธ(์ง„๋‹จยท๊ฒ€ํ† ยทQA)๋Š” S1ยทS2ยทS4ยทS5ยทS7 ๋งŒ, ์“ฐ๊ธฐ ์—์ด์ „ํŠธ๋Š” ์ „ ๋‹จ๊ณ„๋ฅผ ํ•ฉ๋‹ˆ๋‹ค.

์ถฉ๋Œ ์šฐ์„ ์ˆœ์œ„

์›๋ณธ 4์ข…์˜ ๊ทœ์น™์ด ๋ถ€๋”ชํžˆ๋ฉด ์œ„ ์ˆœ์œ„๊ฐ€ ์ด๊น๋‹ˆ๋‹ค. src/precedence.ts(์ฝ”๋“œ)์™€ guides/precedence.md(๋ฌธ์„œ)๋Š” ๊ฐ™์€ ๊ทœ์น™์ž…๋‹ˆ๋‹ค. ์„ธ๋ถ€ ํ•ด์†Œํ‘œ C1~C12 ๋Š” ๋ฌธ์„œ์— ์žˆ์Šต๋‹ˆ๋‹ค.

์ˆœ์œ„

์›์ฒœ

P0

๋…ธ๋“œยท๊ทธ๋ž˜ํ”„ ์ง€์‹œ(์ถœ๋ ฅ ํ˜•์‹, ๋…ธ๋“œ ์ •์ฑ…)

P1

์‚ฌ์šฉ์žยท๋ธŒ๋ฆฌํ”„์˜ ๋ช…์‹œ ์š”๊ตฌ(๋„๊ตฌ ์ธ์ž allow)

P2

ํ”„๋กœ์ ํŠธ ๊ธฐ์กด ๋””์ž์ธ ์‹œ์Šคํ…œ: DESIGN.md ํ† ํฐ, ๊ทธ๋‹ค์Œ ๊ธฐ์กด ์ฝ”๋“œ ํ† ํฐ

P3

์ ‘๊ทผ์„ฑยทํ’ˆ์งˆ ํ•˜ํ•œ: ๋Œ€๋น„ 4.5:1, ๊ฐ€๋ฆผยท์ž˜๋ฆผยท๊นจ์ง„ ์ด๋ฏธ์ง€ยท์Šคํฌ๋ฆฝํŠธ ์˜ค๋ฅ˜ยท์ œ๋ชฉ ์ˆœ์„œยท์ž‘์€ ๊ธ€์ž

P4

impeccable craft-floorยท๋ชจ๋“œ ๊ทœ์น™(๋ชจ๋“  surface, "defaults, not bans")

P5

taste ํ•˜์šฐ์Šค ๊ทœ์น™(persuade ์—์„œ๋งŒ, ๊ทธ ๋ฒ”์œ„ ์•ˆ์—์„œ๋Š” ๊ธˆ์ง€)

P6

UI UX Pro Max ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ(๊ถŒ๊ณ )

P7

๋ธŒ๋žœ๋“œ ์ฐธ๊ณ  DESIGN.md(awesome-design-md)

IMPORTANT

P3 ํ•˜ํ•œ์€ P1ยทP2 ์˜allow ๋กœ๋„ ๋‚ฎ์ถ”์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋Œ€์‹  conflict: true ์™€ "์‚ฌ๋žŒ ๊ฒฐ์ • ํ•„์š”"๋ฅผ ๋ถ™์ž…๋‹ˆ๋‹ค. ํ•˜๋„ค์Šค๋Š” ์ ‘๊ทผ์„ฑ ๊ฒฐ์ •์„ ๋Œ€์‹ ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๋ Œ๋” ์˜ˆ์‹œ

์‹œํ—˜์šฉ ํŽ˜์ด์ง€ test/fixtures/persuade/index.html ์„ design_render(surface persuade, ํญ 1280ยท390)๋กœ ๋ Œ๋”ํ•œ ๊ฒฐ๊ณผ์ž…๋‹ˆ๋‹ค. ์ผ๋ถ€๋Ÿฌ ํ”ํ•œ ๊ฒฐํ•จ์„ ๋„ฃ์€ ํŽ˜์ด์ง€์ž…๋‹ˆ๋‹ค.

FAIL design_render: FAIL 10 ยท WARN 6 ยท INFO 3 (allowed 0, surface-skipped 0)
์™ธ๋ถ€ ์ž์› 1๊ฑด ์ฐจ๋‹จ: ์‹ค์ œ ํ™”๋ฉด๊ณผ ๋‹ค๋ฅผ ์ˆ˜ ์žˆ์Œ
[FAIL] contrast (taste-gate, impeccable) โ€” Unreadable text: "Read the release notes" 2.1:1 (#0000ee on #0b0b14)
[FAIL] gradient-text (taste-gate, impeccable) โ€” 1 gradient-filled text element(s).
[FAIL] skipped-heading (impeccable) โ€” Skipped heading level: <h1> "Build faster with AI" followed by <h3> "Fast" (missing h2)
[WARN] flat-type-hierarchy (impeccable) โ€” Role sizes: body 16px, h1 16px, h3 16px (largest adjacent step 1.00:1; target 1.25:1)
[INFO] broken-image (taste-gate) โ€” Broken image(s): https://example.invalid/a.png [blocked-by-harness]

๊ฒฐ๊ณผ

๊ฑด์ˆ˜

๋Œ€ํ‘œ ๋ฐœ๊ฒฌ

๐Ÿ”ด FAIL

10

๋Œ€๋น„ 2.1:1, ๊ทธ๋ผ๋””์–ธํŠธ ๊ธ€์ž, ์ œ๋ชฉ ๋‹จ๊ณ„ ๊ฑด๋„ˆ๋œ€, ๋ณด๋ผ ํŒ”๋ ˆํŠธ, ์žฅ์‹ ๋ฒˆํ˜ธ, ์ •์ง€ ํ™”๋ฉด

๐ŸŸก WARN

6

๊ธฐ๋ณธ ์„œ์ฒด Inter, ํ‰ํ‰ํ•œ ๊ธ€์ž ์œ„๊ณ„, ์ฒซ ํ™”๋ฉด ๋ฒ„ํŠผ ์—†์Œ, ๊ธ€๋ž˜์Šค ๋ฉด

๐Ÿ”ต INFO

3

์™ธ๋ถ€ ์ด๋ฏธ์ง€ ์ฐจ๋‹จ์œผ๋กœ ์ƒ๊ธด ๋ฐœ๊ฒฌ(blocked-by-harness, ๊ฒฐํ•จ์œผ๋กœ ์„ธ์ง€ ์•Š์Œ)

  • ๊ฐ™์€ ๋ฌธ์ œ๋ฅผ ๋‘ ์—”์ง„์ด ์žก์œผ๋ฉด ํ•˜๋‚˜๋กœ ํ•ฉ์น˜๊ณ  ์ถœ์ฒ˜๋ฅผ ๋ชจ๋‘ ์ ์Šต๋‹ˆ๋‹ค(contrast (taste-gate, impeccable)).

  • ์ „์ฒด ๊ฒฐ๊ณผ๋Š” ํ˜ธ์ถœ ํด๋”์˜ report.json ์—, ์Šคํฌ๋ฆฐ์ƒท์€ ๊ฐ™์€ ํด๋”์˜ fold-<ํญ>.jpg ์— ๋‚จ์Šต๋‹ˆ๋‹ค.

๋ฌถ์€ ์›๋ณธ

์›๋ณธ

๋ผ์ด์„ ์Šค

์“ฐ์ž„

ํŒŒ์ผ

impeccable

Apache-2.0

์ฐธ๊ณ  ๋ฌธ์„œ(craft-floorยท๋ชจ๋“œ ๋“ฑ) + ๊ฒฐ์ •์  ํƒ์ง€ ์—”์ง„ 0.1.15

48

taste-skill

MIT

์•„ํŠธ ๋””๋ ‰์…˜ draw, lint, ๋ Œ๋” ์ธก์ • ํ•จ์ˆ˜

28

UI UX Pro Max

MIT

์Šคํƒ€์ผยท์ƒ‰ยท์„œ์ฒด CSV ์™€ ๊ฒ€์ƒ‰๊ธฐยท๋””์ž์ธ ์‹œ์Šคํ…œ ์ œ์•ˆ

47

awesome-design-md

MIT

๋ธŒ๋žœ๋“œ DESIGN.md 84๊ฐœ(์ฐธ๊ณ  ์ „์šฉ)

86

์›๋ณธ ์ปค๋ฐ‹๊ณผ ํŒŒ์ผ๋ณ„ SHA-256 ์€ vendor/SOURCES.json ์— ์žˆ์Šต๋‹ˆ๋‹ค.

๋น ๋ฅธ ์‹œ์ž‘

์š”๊ตฌ ์‚ฌํ•ญ

ํ•ญ๋ชฉ

๋ฒ„์ „

์“ฐ์ž„

Windows

x64

impeccable ์—”์ง„ ๋ฐ”์ด๋„ˆ๋ฆฌ(@impeccable/cli-windows-x64)

Node.js

22.18 ์ด์ƒ(24 ๊ถŒ์žฅ)

.ts ๋ฅผ ๋นŒ๋“œ ์—†์ด ์ง์ ‘ ์‹คํ–‰

Python

3.9 ์ด์ƒ

design_search(UI UX Pro Max ๊ฒ€์ƒ‰๊ธฐ)

๋ธŒ๋ผ์šฐ์ €

chromium headless shell ๋˜๋Š” Edge

design_renderยทdesign_inspect

์„ค์น˜์™€ ํ™•์ธ

git clone <์ €์žฅ์†Œ ์ฃผ์†Œ> <์„ค์น˜ ๊ฒฝ๋กœ>
cd <์„ค์น˜ ๊ฒฝ๋กœ>
npm ci            # ์ €์žฅ์†Œ ์•ˆ์—๋งŒ ์„ค์น˜(.npmrc: save-exact, ignore-scripts)
npm run smoke     # initialize โ†’ tools/list โ†’ design_guide, ๋งˆ์ง€๋ง‰ ์ค„ OK

ํด๋ผ์ด์–ธํŠธ ๋“ฑ๋ก

# Claude Code
claude mcp add astrondesign --scope user -e ASTRONDESIGN_NETWORK=off -- node "<์„ค์น˜ ๊ฒฝ๋กœ>/src/server.ts"
# Codex: ~/.codex/config.toml
[mcp_servers.astrondesign]
command = "node"
args = ["<์„ค์น˜ ๊ฒฝ๋กœ>/src/server.ts"]
tool_timeout_sec = 180

.mcp.json ์˜ˆ์‹œ, ์ œํ•œ ์‹œ๊ฐ„ ๊ทผ๊ฑฐ, ๋ฌธ์ œ ํ•ด๊ฒฐ์€ docs/integration.md ์— ์žˆ์Šต๋‹ˆ๋‹ค.

์ œ๊ณต ๋„๊ตฌ

๋„๊ตฌ

ํ•˜๋Š” ์ผ

์ฃผ์š” ์ž…๋ ฅ

design_guide

์ž‘์—… ํ๋ฆ„ยท์šฐ์„ ์ˆœ์œ„ยท๋น„ํ‰ ๊ทœ์•ฝ๊ณผ ์›๋ณธ ์ฐธ๊ณ  ๋ฌธ์„œ๋ฅผ 3,500์ž ์ชฝ ๋‹จ์œ„๋กœ ์ œ๊ณต. ๋จผ์ € topic ์—†์ด ๋ถ€๋ฆ„

topic(์˜ˆ: workflow, impeccable/craft-floor, brand/vercel), offset

design_search

UI UX Pro Max ๊ฒ€์ƒ‰ยท๋””์ž์ธ ์‹œ์Šคํ…œ ์ œ์•ˆ(๊ถŒ๊ณ , P6)

query, domain, stack, design_system, max_results

design_direction

๊ณต๊ฐœ ๋žœ๋”ฉยท๋งˆ์ผ€ํŒ… ํŽ˜์ด์ง€์˜ ์•„ํŠธ ๋””๋ ‰์…˜ ๋ฝ‘๊ธฐ(taste draw, ์˜คํ”„๋ผ์ธ)

sector, brief, sections, tone, have, keep, options, seed

design_lint

์†Œ์Šค ์ •์  ๊ฒ€์‚ฌ(impeccable + taste lint) ํ›„ P0P7ยทC1C12 ์ ์šฉ

paths, surface, allow, design_md, engines

design_render

ํ—ค๋“œ๋ฆฌ์Šค ๋ธŒ๋ผ์šฐ์ €๋กœ ์—ฌ๋Ÿฌ ํญ ๋ Œ๋”: ์ฒซ ํ™”๋ฉด ์Šคํฌ๋ฆฐ์ƒท, taste ์ธก์ •, impeccable DOM ๊ฒ€์‚ฌ, ์ ‘๊ทผ์„ฑ ์Šค๋ƒ…์ƒท

target, surface, widths(์ตœ๋Œ€ 4), checks, allow, wait_ms

design_inspect

์„ ํƒ์žยท์ขŒํ‘œ๋กœ ์š”์†Œ ๋ฌถ์Œ(HTMLยท๊ณ„์‚ฐ ์Šคํƒ€์ผ 16๊ฐœยท์œ„์น˜ยท์ž˜๋ฆฐ ์ด๋ฏธ์ง€)์„ ๋ชจ์œผ๊ณ  notes ๋กœ Design Feedback ์ž‘์„ฑ

target, selector ๋˜๋Š” point, notes, width, height

๊ฒฐ๊ณผ ์ฒซ ์ค„์€ OK|FAIL|ERROR <์š”์•ฝ> ์ด๊ณ , ๋ฐœ๊ฒฌ ์ค„์€ [LEVEL] id (sources) ์œ„์น˜ โ€” message [overridden_by] ํ˜•์‹์ž…๋‹ˆ๋‹ค.

์„ค์ •

ํ™˜๊ฒฝ ๋ณ€์ˆ˜

๊ธฐ๋ณธ

๋œป

ASTRONDESIGN_OUT_DIR

<cwd>/.astron-logs/astrondesign

์‚ฐ์ถœ ๋ฃจํŠธ(์ ˆ๋Œ€ ๊ฒฝ๋กœ)

ASTRONDESIGN_NETWORK

off

allow ์ด๊ณ  ํ˜ธ์ถœ ์ธ์ž allow_network:true ์ผ ๋•Œ๋งŒ ์™ธ๋ถ€ ์š”์ฒญ ํ—ˆ์šฉ

ASTRONDESIGN_PYTHON

python

UI UX Pro Max ๊ฒ€์ƒ‰์— ์“ธ python

ASTRONDESIGN_BROWSER

โ€”

๋ธŒ๋ผ์šฐ์ € ์‹คํ–‰ ํŒŒ์ผ(1์ˆœ์œ„)

ASTRONDESIGN_IDLE_MS

120000

๋งˆ์ง€๋ง‰ ํ˜ธ์ถœ ๋’ค ๋ธŒ๋ผ์šฐ์ €๋ฅผ ๋‹ซ๊ธฐ๊นŒ์ง€์˜ ์‹œ๊ฐ„(ms)

์šด์˜ ์•ˆ๋‚ด

  • ๋ชจ๋“  ์‚ฐ์ถœ(์Šคํฌ๋ฆฐ์ƒทยทreport.jsonยทDesign Feedback)์€ <cwd>/.astron-logs/astrondesign/<์‹œ๊ฐ>-<๋„๊ตฌ>-<id>/ ์— ๋‚จ์Šต๋‹ˆ๋‹ค.

  • ํ”„๋กœ์ ํŠธ ํŒŒ์ผ์€ ์“ฐ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋ธŒ๋žœ๋“œ DESIGN.md ๋ฅผ ํ”„๋กœ์ ํŠธ์— ๋ณต์‚ฌํ•˜๋Š” ์ผ๋„ ์‚ฌ์šฉ์ž๊ฐ€ ๋ช…์‹œ์ ์œผ๋กœ ์š”์ฒญํ•  ๋•Œ๋งŒ ์—์ด์ „ํŠธ๊ฐ€ ์ง์ ‘ ํ•ฉ๋‹ˆ๋‹ค.

  • ๋ Œ๋”ยท๊ฒ€์‚ฌ ๋Œ€์ƒ์€ ์„œ๋ฒ„ cwd ์•ˆ์˜ ๊ฒฝ๋กœ์—ฌ์•ผ ํ•ฉ๋‹ˆ๋‹ค.

  • ๊ธฐ๋ณธ์œผ๋กœ ์™ธ๋ถ€ ์š”์ฒญ์„ ๋ง‰์Šต๋‹ˆ๋‹ค. ๋กœ์ปฌ ํŒŒ์ผ์€ ๋ฃจํ”„๋ฐฑ ์ •์  ์„œ๋ฒ„๋กœ ๋„์›Œ ๋ Œ๋”ํ•ฉ๋‹ˆ๋‹ค.

  • ํ•˜์œ„ ํ”„๋กœ์„ธ์Šค์—๋Š” ํ…”๋ ˆ๋ฉ”ํŠธ๋ฆฌ ๋„๊ธฐ์™€ ํ”„๋ก์‹œ ์ฐจ๋‹จ์„ ์ ์šฉํ•ฉ๋‹ˆ๋‹ค.

  • ์™ธ๋ถ€ URL ์„ ๋ Œ๋”ํ•˜๋ ค๋ฉด env ASTRONDESIGN_NETWORK=allow ์™€ ์ธ์ž allow_network:true ๊ฐ€ ๋ชจ๋‘ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

  • ์ฐจ๋‹จ ๋•Œ๋ฌธ์— ์ƒ๊ธด ๋ฐœ๊ฒฌ์€ blocked-by-harness ๋กœ ํ‘œ์‹œ๋˜๊ณ  ๊ฒฐํ•จ์œผ๋กœ ์„ธ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

  • ๋ธŒ๋ผ์šฐ์ €๋Š” ์ฒซ ๋ Œ๋” ๋•Œ ๋„์šฐ๊ณ (env ๊ฒฝ๋กœ โ†’ playwright ๊ธฐ๋ณธ โ†’ Edge), ๋งˆ์ง€๋ง‰ ํ˜ธ์ถœ ๋’ค ASTRONDESIGN_IDLE_MS ๊ฐ€ ์ง€๋‚˜๋ฉด ๋‹ซ์Šต๋‹ˆ๋‹ค.

  • ์„œ๋ฒ„ ํ•˜๋‚˜๊ฐ€ ๋ธŒ๋ผ์šฐ์ € ํ•˜๋‚˜๋ฅผ ์”๋‹ˆ๋‹ค. ๋™์‹œ์— ๋„๋Š” ๋””์ž์ธ ์—์ด์ „ํŠธ๋Š” 2๊ฐœ ์ดํ•˜๋ฅผ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค.

npm run typecheck     # tsc ์˜ค๋ฅ˜ 0
npm test              # ๋‹จ์œ„ + MCP ํ”„๋กœํ† ์ฝœ + ์—”์ง„ ์‹œํ—˜
npm run smoke         # ์„œ๋ฒ„ ๊ธฐ๋™ ํ™•์ธ
npm run test:browser  # ์‹ค์ œ ๋ธŒ๋ผ์šฐ์ € ์‹œํ—˜(๋ฌด๊ฑฐ์›€)
npm run vendor        # ์›๋ณธ ์‚ฌ๋ณธ์—์„œ vendor/ ์žฌ์ƒ์„ฑ(์ปค๋ฐ‹ ํ•ด์‹œ ํ™•์ธ)

์ถœ์ฒ˜ยท๋ผ์ด์„ ์Šค

  • ์›๋ณธ 4์ข…์˜ ์ €์žฅ์†Œยท์ปค๋ฐ‹ยทํฌํ•จ/์ œ์™ธ ๋ฒ”์œ„ยทํŒŒ์ƒ ํŒŒ์ผ์€ NOTICE.md, ํŒŒ์ผ๋ณ„ ํ•ด์‹œ๋Š” vendor/SOURCES.json ์— ์žˆ์Šต๋‹ˆ๋‹ค.

  • impeccable ์˜ LICENSEยทNOTICE.md ๋Š” vendor/impeccable ์— ๊ทธ๋Œ€๋กœ ๋ณด์กดํ•ฉ๋‹ˆ๋‹ค.

  • design_inspect ์˜ ์š”์†Œ ๋ฌถ์Œ ํ˜•์‹์€ stablyai/orca Design Mode(MIT)์˜ ๋™์ž‘์„ ์ฐธ๊ณ ํ•ด ์ƒˆ๋กœ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค(์ฝ”๋“œ ๋ฏธํฌํ•จ).

  • ๋ธŒ๋žœ๋“œ DESIGN.md ๋Š” ์ฐธ๊ณ  ์ž๋ฃŒ์ž…๋‹ˆ๋‹ค. ๊ฐ ์ƒํ‘œยท์™ธํ˜•์˜ ๊ถŒ๋ฆฌ๋Š” ํ•ด๋‹น ์†Œ์œ ์ž์—๊ฒŒ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์ด ์ €์žฅ์†Œ ์ž์ฒด๋Š” MIT ๋ผ์ด์„ ์Šค์ž…๋‹ˆ๋‹ค. vendor/ ์˜ ์›๋ณธ์€ ์œ„ ํ‘œ์˜ ๊ฐ ๋ผ์ด์„ ์Šค๋ฅผ ๋”ฐ๋ฆ…๋‹ˆ๋‹ค.

Available Tools

6 tools
design_directionC

Deal an art direction for a public landing or marketing page (taste-skill draw). Not for dashboards or app screens.

NameRequiredDescriptionDefault
haveNo
keepNo
listNo
seedNo
toneNo
briefNo
redrawNo
sectorNo
optionsNo
sectionsNo
directionNo

TDQS

C2.8/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full behavioral burden. It does not explain whether the tool generates/draws output, how the seed or redraw parameters affect results, whether it is read-only, or what the response looks like; it only states scope and exclusions.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is short and front-loads the main scope before the exclusion. The wording is slightly awkward ('Deal an art direction') but there is no wasted text.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness1/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given 11 parameters, no annotations, no output schema, and no parameter descriptions, the definition is far too sparse. An agent would not know how to use the input fields or what behavior to expect from a creative-generation tool.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters1/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

There are 11 parameters with 0% schema description coverage, and the description explains none of them. Terms like 'have', 'keep', 'list', 'seed', 'tone', 'brief', 'redraw', 'sector', 'options', 'sections', and 'direction' are left entirely for the agent to infer.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description identifies a specific creative output: an art direction for a public landing or marketing page. It also excludes dashboards and app screens, which clarifies scope. However, the verb 'Deal' is nonstandard and it does not differentiate itself from sibling tools such as design_guide or design_render.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

It gives a clear usage context: public landing or marketing pages, explicitly excluding dashboards and app screens. It does not name sibling alternatives or explain when to choose design_direction over design_search, design_guide, or design_render.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

design_guideA

UI/UX design harness guide: workflow, conflict precedence, critique protocol and references (impeccable, taste, UI UX Pro Max, brand DESIGN.md). Call first without topic.

NameRequiredDescriptionDefault
topicNo
offsetNo

TDQS

A3.6/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden. It discloses that this is a guide/reference resource and hints at structured content (conflict precedence, critique protocol), which implies a read-only retrieval, but it never states the return shape, whether the guide is paged, or how large the payload is.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two compact sentences, with the tool's identity front-loaded and the usage instruction trailing. The parenthetical reference list (impeccable, taste, UI UX Pro Max, brand DESIGN.md) is slightly noisy but does signal the scope of content covered.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a two-parameter guide tool with no annotations and no output schema, the description covers the entry-point case but leaves offset paging and topic-scoped retrieval behavior unexplained. Adequate to start, not enough to invoke correctly on subsequent calls.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 0%, so the description must compensate. 'Call first without topic' usefully tells the agent that topic is optional and should be omitted on the initial call, but the offset parameter (paging) is never mentioned, leaving half the parameters undocumented anywhere.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description states the resource (a UI/UX design harness guide) and enumerates its content: workflow, conflict precedence, critique protocol, and references. An agent can tell this is the documentation/entry-point tool rather than a search or render tool, though the wording is noun-phrase heavy and lacks an explicit verb like 'returns' or 'loads'.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

'Call first without topic' gives an explicit, actionable usage instruction that routes the agent to this tool before the siblings. It does not name the alternatives (design_search, design_direction) or state when a topic-scoped call is warranted, so guidance is clear but not complete.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

design_inspectC

Inspect page elements by selector or point (HTML, 16 computed styles, bounds, crop) and write a Design Feedback note.

NameRequiredDescriptionDefault
notesNo
pointNo
widthNo
heightNo
targetYes
selectorNo
inline_imageNo
allow_networkNo

TDQS

C2.7/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden. It discloses returned artifacts (HTML, 16 computed styles, bounds, crop) and that it writes a Design Feedback note, but omits permission/auth requirements, whether the note write is persistent or destructive, and the behavior of allow_network and inline_image.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

A single front-loaded sentence; the parenthetical lists outputs efficiently with no filler. Density compresses several behaviors into one line, but the sentence remains readable.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For an 8-parameter tool with nested objects, no annotations, and no output schema, the description is too thin. It does not explain the notes structure or network/image options, leaving important call-shaping details missing.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters2/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 0% for 8 parameters. The description names selector, point, and implies notes/crop, but leaves target, notes[].intent, allow_network, inline_image, and width/height unexplained, so it only minimally compensates.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb ('Inspect') and resource ('page elements'), and names the two targeting modes (selector or point) plus what it returns. It does not explicitly differentiate from siblings like design_render or design_lint, so it is clear but not fully sibling-aware.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The phrase 'by selector or point' hints at invocation modes but gives no when-to-use conditions, prerequisites, or comparison with sibling tools such as design_lint or design_search. There are no exclusions or alternatives.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

design_lintC

Static UI design lint of source files with impeccable and taste rules, resolved by AstronDesign precedence. Writes nothing to the project.

NameRequiredDescriptionDefault
allowNo
pathsYes
enginesNo
surfaceYes
design_mdNo

TDQS

C2.9/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the full burden, and it does disclose one genuinely useful trait: 'Writes nothing to the project' tells the agent this is a non-mutating read. Beyond that it is silent on what a run produces (findings? pass/fail?), whether it needs configuration, and how the two engines combine.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two compact sentences, front-loaded with the core action and with no filler. The only inefficiency is the opaque 'AstronDesign precedence' clause, which occupies space without conveying meaning to an outside agent.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a tool with five parameters, two of them required, a required enum, no annotations, no output schema, and zero schema descriptions, the definition is far too thin. An agent cannot determine what surface values mean or what a lint run returns, so it is not complete enough to call confidently.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters2/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 0% for five parameters, so the description must compensate and largely does not. 'Source files' loosely maps to paths and 'impeccable and taste rules' to engines, but the required surface enum (persuade/operate/read/experience), allow, and design_md are never explained in either place.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb and resource: static UI design lint of source files, with the two rule engines (impeccable, taste) named. That distinguishes it from siblings like design_render or design_inspect, though the phrase 'resolved by AstronDesign precedence' is unexplained jargon that adds no clarity.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description says what it is but never when to pick it over design_inspect or design_guide, nor what preconditions exist (e.g., a design spec must already exist). No exclusions or alternative routing are given, leaving usage entirely to inference.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

design_renderC

Render a page in a real headless browser at several widths: screenshots, measured design rules, accessibility snapshot. External network blocked by default.

NameRequiredDescriptionDefault
allowNo
checksNo
targetYes
widthsNo
surfaceYes
wait_msNo
design_mdNo
inline_imageNo
allow_networkNo

TDQS

C2.9/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations, so the description carries the full burden. It usefully discloses two behavioral traits โ€” headless real-browser rendering and that external network is blocked by default โ€” but omits cost/latency, permission needs, and what allow_network changes.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

A single dense sentence with the core capability and outputs front-loaded. No filler, though it could have spent a few more words on the high-value undocumented parameters.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

A 9-parameter render tool with no annotations and no output schema needs more explanation than this. The description names outputs but leaves most parameters and the composite result shape unexplained.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters2/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

With 9 parameters and 0% schema description coverage, the description explains almost nothing. 'Several widths' and 'external network blocked by default' gesture at widths and allow_network, but target, surface, checks, wait_ms, design_md, allow, and inline_image remain undocumented.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

Specific verb ('Render') and resource ('a page in a real headless browser') plus the concrete artifacts produced (screenshots, measured design rules, accessibility snapshot). An agent can tell this is a visual render/eval tool, though it doesn't explicitly distinguish itself from sibling design_inspect or design_lint.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No statement of when to use this versus design_inspect, design_lint, or design_search, and no prerequisites beyond the network note. The outputs imply the use case but there is no explicit guidance or exclusion.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 6 tool updatesv0.1.0
    • First observeddesign_direction
    • First observeddesign_guide
    • First observeddesign_inspect
    • First observeddesign_lint
    • First observeddesign_render
    • First observeddesign_search

TDQS

B3.2/5.0

Scored across 6 tools

Disambiguation4/5

Each tool has a distinct role: guidance (design_guide), static analysis (design_lint), data lookup (design_search), ideation (design_direction), browser rendering (design_render), and element-level inspection (design_inspect). The only real friction is between design_render and design_inspect, both of which measure live pages, though their descriptions (whole-page screenshots/rules vs. single-element computed styles) differentiate them adequately for a careful agent.

Naming Consistency4/5

All tools share the design_ prefix with a single word suffix, forming a predictable namespace. The second token mixes nouns (guide, direction) and verbs (lint, render, inspect, search), so the verb_noun pattern is not strictly followed, but the prefix uniformity keeps the set readable and scannable.

Tool Count5/5

Six tools is well within the ideal range and each one covers a separate phase of a design workflow (guide, search, direction, lint, render, inspect). No tool appears redundant or tacked on.

Completeness4/5

The surface covers the full read/analyze/advisory loop: onboarding guidance, reference lookup, direction dealing, static linting, rendering, and element inspection with feedback notes. The notable gap is any apply/fix or note-retrieval operation โ€” design_lint explicitly writes nothing and there is no tool to read back or resolve accumulated Design Feedback notes, which could dead-end a remediation workflow.

Maintenance

ActivityMaintained
ResponsivenessNo issues

Related MCP Connectors

Related MCP Servers

  • A
    license
    Not graded
    quality
    B
    maintenance
    Provides coding agents with local tools to inspect project UI inventories, propose and compare visual direction boards, compile versioned design contracts and DTCG tokens, retrieve section-specific blueprints, and audit running interfaces with browser evidence including screenshots, accessibility findings, and overflow measurements.
    MIT
  • A
    license
    Not graded
    quality
    B
    maintenance
    Enables coding agents and CI to verify rendered web UIs against design token usage, layout constraints, and accessibility rules, returning concise pass/fail verdicts with actionable findings.
    MIT
  • A
    license
    Not graded
    quality
    B
    maintenance
    Enables AI coding agents to audit rendered web pages for design and UI defects by measuring geometry, styles, contrast and motion in a local browser and judging them against evidence-tiered rules. Findings come back as short, fixable items expressed in the project's own design tokens, while only sanitized numeric measurements leave the machine.
    Apache 2.0
  • A
    license
    Not graded
    quality
    A
    maintenance
    Enables AI coding agents to act like a senior UI/UX team by reading an existing site's design DNA and tokens, proposing distinct art directions and motion mechanics that fit the brief, and validating changes in a live headless Chromium browser. Provides per-element accessibility and performance auditing (WCAG 2.2 contrast, focus, clipping, phone-menu behavior, LCP/CLS) at multiple viewport widths, plus baseline capture, before/after comparison, and one-command rollback for safe redesigns.
    561 npm
    2
    MIT