Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
framesmith는 AI 코딩 에이전트를 유능한 UI 디자이너로 변신시키는 오픈 소스 MCP 서버입니다. 이 서버는 에이전트에게 시각적 캔버스, 검증된 디자인 패턴 라이브러리, 그리고 엄격한 품질 기준을 제공하여, 프레임워크 코드 작성 전에 실제 디자인을 검토하고 승인할 수 있게 합니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 GitHub Claude Ecosystem의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기AI 코딩 에이전트를 유능한 UI 디자이너로 변신시키는 오픈 소스 MCP 서버입니다. 이 서버는 에이전트에게 시각적 캔버스, 검증된 디자인 패턴 라이브러리, 그리고 무언가를 보여주기 전에 통과해야 하는 품질 기준을 제공합니다. 따라서 프레임워크 코드가 작성되기 전에 브라우저에서 실제의, 허술하지 않은(non-slop) 디자인을 검토하고 이에 동의할 수 있습니다.
목차: 작동 방식 · 기능 · 뷰어 · 설치 · 도구 · 사용 예시 · 워크플로우 · 개발
framesmith viewer — workspace sidebar on the left, and the Pattern library project on the right showing the 11 vetted page patterns (auth, bento-grid, catalogue, dashboard, editorial-longform, marquee-hero, onboarding, pricing, settings, split-workbench, stat-led) as live thumbnails on a generated design system, each with a green quality-score badge, and state chips (default / loading / empty / error) under every data-bearing pattern.
위쪽: 내장된 패턴 라이브러리를 보여주는 framesmith 뷰어입니다. 에이전트가 시작하는 11가지 검증된 페이지 아키타입(page archetypes)들이 있으며, 각 패턴은 실시간 품질 점수와 설계된 상태 변형(designed state variants)을 가지고 있습니다. 작업 공간(Workspaces)과 프로젝트는 사이드바에 위치하며, 디자인 파일처럼 캔버스를 탐색할 수 있습니다.
아래의 모든 화면은 framesmith 고유의 어휘를 가진 에이전트에 의해 처음부터 끝까지 구축되었습니다. 각 화면은 generate_design_system 호출 한 번(시드 색상 + 개성)으로 생성되었으며, 패턴 스탬프, 실제 컨트롤, 그리고 모든 품질 게이트가 통과된 것을 증명합니다 (점수 ≥ 95, 상태 설계 완료, 스트레스 테스트 완료, 두 가지 테마 모두):
A customer-support dashboard built by an agent in framesmith, light theme: sidebar with grouped navigation and an account row, four KPI cards (tickets resolved, first reply, SLA breaches, CSAT) with sparklines and tinted delta pills, a tickets-per-day bar chart with a highlighted day and a floating tooltip, a data-bound tickets-by-channel donut with a center total and legend, an agent-workload table with tinted status chips, and a top-performers panel. Generated from one seed (#2563EB) on the "technical" personality.
An API platform console built by the same toolkit, dark theme: teal design system on the "data-dense" personality with JetBrains Mono figures — request/error-rate/latency KPI cards with sparklines, a requests-per-day bar chart with a highlighted day, a traffic-by-endpoint donut, a deployments table with Live/Rolling/Degraded status chips, and a top-consumers panel.
동일한 메커니즘을 사용했지만, 다른 시드와 개성(personality)을 적용했습니다. 밝은 운영 대시보드와 어두운 API 콘솔입니다. 모든 색상 쌍은 구조적으로 AA 등급을 충족하며, 모든 차트는 데이터에 바인딩되어 있습니다 (SVG 경로가 아닌 값을 수정). 그리고 다크 테마는 반전된 것이 아니라 생성되었습니다.
A specialty-coffee checkout built by an agent in framesmith, light theme: a masthead with the store mark and a secure-checkout note, a form column with Contact, Delivery and Payment sections — real radio, checkbox and input controls, a two-option delivery-speed selector — beside a sticky order summary listing two line items, subtotal, free delivery, a first-order credit, the total, and a Place order button, with a gift-code card beneath. Generated from one seed (#A24B1E) on the "soft" personality and stamped with the commerce genre.
모든 화면이 대시보드인 것은 아닙니다. 이 결제 화면은 dashboard의 거래적 대응물인 commerce 장르를 가지고 있기 때문에 평가자는 여기서 나열된 가격과 총액을 조작된 데이터가 아닌 디자인으로 읽습니다. 여전히 위 두 화면과 마찬가지로, 설계된 장바구니 비어있음(empty-basket) 및 로딩(loading) 상태까지 포함하여 같은 기준을 통과했습니다.
MCP Client → stdio → framesmith server
↓
Scene Graph (메모리 내 JSON 트리)
...
AI 에이전트는 방치될 경우, AI가 생성한 것처럼 보이는 UI를 만들어내는 경향이 있습니다. 즉, 일반적인 간격, 아이콘 부재, 기본 보라색 그라디언트, 플레이스홀더처럼 보이는 텍스트 등이 그렇습니다. framesmith는 디자인을 코드 앞에 배치하고 이를 기준에 맞추어 유지함으로써 이러한 격차를 해소합니다:
canvas_stress CLEAN)에도 견고하게 설계되었습니다 — 그런 다음 이를 각색합니다. 빈 캔버스는 아마추어 작품이 나오는 곳이며, 패턴은 아마추어적이지 않은 출발점입니다. (list_structures / apply_structure)토글/체크박스/라디오/선택), 데이터 기반 차트(라인/바/도넛/스파크라인, 다중 시리즈, 바 강조), 재사용 가능한 컴포넌트, 그리고 계층적 디자인 토큰 — 이들은 유니코드 글리프나 임의의 엘립시스, 또는 차트를 대신하는 손으로 그린 SVG 경로로 절대 위조되지 않습니다.평가하고, 스스로 수정합니다. canvas_evaluate는 디자인을 다섯 가지 크래프트 카테고리 외에 클리셰 감지기(cliché-tell), 상태 커버리지(state-coverage) 확인(디자인된 빈/로딩 상태가 없는 데이터 화면은 완성되지 않은 것임), 그리고 사용성(usability) 계층(히트 타겟 플로어, 레이블 연관성, 정직한 액션 카피)을 거쳐 점수를 매기고, 최종적으로 READY / NOT READY 지시를 반환합니다. 에이전트는 모든 경고와 클리셰를 해결하고, READY 상태일 때만 제시합니다. 완성도를 높이는 것은 당신의 일이 아니라 에이전트의 일입니다. 4. 브라우저에서 검토하고, 결과물을 소유하세요. 사용자는 디자인 파일을 다루듯 캔버스를 탐색하며, 실시간 **품질 검사기(quality inspector)**와 **디자인 시스템 패널(design-system panel)**을 이용할 수 있습니다. 디자인은 개방형 JSON 형식으로 리포지토리에 커밋되어 영구적으로 보존됩니다. 독점적인 형식이나 종속성이 없으며, 배포된 HTML에서 재가져오기하여 디자인의 진정성을 유지할 수 있습니다.
| 영역 (Area) | 제공되는 것 (What you get) |
|---|---|
| 렌더링 (Rendering) | Scene graph → HTML/CSS → Puppeteer PNG · 반응형 브레이크포인트 · 실제 CSS 그리드 (`layout: |
품질 패널(Quality panel). 캔버스 세부 보기에는 오른쪽에서 읽기 전용 **품질 검사기(quality inspector)**가 표시됩니다: 휴리스틱 canvas_evaluate 점수 (0–100), 카테고리별 막대, 그리고 이슈 목록이 있습니다. 각 클리셰는 category · tell 배지, 심각도, 제안과 함께 표시됩니다. canvas_autofix가 해결할 수 있는 이슈에는 자동 수정 가능(auto-fixable) 태그가 붙으며, 어떤 이슈를 클릭해도 라이브 미리 보기에서 해당 노드가 강조됩니다. 모든 갤러리 카드에도 색상 코드로 된 점수 배지가 표시되어 약한 캔버스를 한눈에 파악할 수 있습니다. 이 점수는 에이전트가 MCP(동일한 빠른 모드 평가, 캔버스 프리셋으로 장르 완화)를 통해 보는 것과 일치합니다. 이는 표시용으로만 계산되며 절대 다시 기록되지 않습니다.
위쪽: 지정 및 설명(point-and-tell) 기능 작동 모습 — 댓글 모드가 활성화되어 있고, 클릭된 요소가 윤곽선 처리되며, 팝오버의 브레드크럼이 앵커를 재범위화하고, 피드백 탭은 열린 댓글과 에이전트가 해결한 이슈에 대한 답변을 추적합니다.
피드백 패널(Feedback panel). 지정 및 설명: 도구 모음에서 댓글(Comment) 토글을 켜고 미리 보기의 아무 요소나 클릭하여 에이전트에게 메모를 남길 수 있습니다 — 팝오버의 브레드크럼은 정확한 요소부터 해당 카드의 섹션 또는 전체 페이지까지 앵커를 재범위화합니다. 피드백(Feedback) 탭에는 열린 댓글 목록(배지 = 열린 개수)이 클릭 시 강조 표시되며, 이를 해결하거나 삭제할 수 있고, 에이전트가 항목을 처리한 후의 답변으로 에이전트의 해결 메모를 보여줍니다. 댓글은 캔버스 자체에 지속적으로 저장됩니다(metadata.feedback — 바운드 리포지토리에서 git-diffable). 그리고 에이전트는 get_feedback을 통해 MCP로 이들을 읽어옵니다; 열린 피드백은 품질 이슈와 마찬가지로 에이전트가 제시하는 것을 차단합니다.
디자인 시스템 패널. 두 번째 인스펙터 탭에서는 전체 작업 공간 ▸ 프로젝트 ▸ 캔버스 상속 체인을 통해 해결된 캔버스의 효과적인 디자인 토큰(색상 견본, 타이포그래피 스케일, 간격, 반지름)을 보여줍니다. 각 섹션은 지배적인 소스 레이어를 기록하며, 다른 레이어에서 해결되는 모든 토큰은 태그(canvas / project / workspace)가 지정되어 있어 주어진 캔버스가 무엇을 사용자 정의하고 무엇을 상속했는지 한눈에 볼 수 있습니다.
디자인은 AI 어시스턴트의 MCP(Multi-Client Protocol) 도구 호출을 통해 작성되며, 뷰어에서는 검토, 댓글 달기 및 라이프사이클 관리를 수행할 뿐 노드를 편집하지 않습니다. 파일들은 ~/.framesmith/canvases/에 영속적으로 저장되어 뷰어가 세션 간에도 계속해서 표시할 수 있도록 합니다.
복제(clone)나 빌드가 필요 없습니다. npx를 통해 MCP 클라이언트에 framesmith를 등록하세요 (Node 20+ 필요).
claude mcp add framesmith -- npx -y framesmith
~/.codex/config.toml에 추가합니다:
[mcp_servers.framesmith]
command =
원클(One-call) 온보딩 — 세션마다 권장되는 첫 호출이며, 반복 실행해도 안전합니다 (멱등성, idempotent). 현재 레포지토리가 아직 바인딩되지 않은 경우 이를 바인딩하고 (캔버스가 `.framesmith/` 아래에 커밋된 JSON이 되도록 함), 컨벤션 프로젝트들이 존재하는지 확인하며, 작업 시작에 필요한 라이브 상태를 반환합니다.