> 사용자 피드백을 디자인 토큰 레벨로 번역하여 반영하고 DESIGN.md를 업데이트하는 스킬
> 선택된 디자인 방향과 DESIGN.md 기반으로 핵심 화면 프리뷰를 생성하는 스킬 (JSONC 디자인 브리프 워크플로우 내장)
PRD 또는 프로젝트 설명에서 디자인 레퍼런스를 수집하고 분석하는 스킬
수집된 레퍼런스를 기반으로 DESIGN.md(디자인 시스템) 초안을 생성하는 스킬
3~4가지 디자인 방향을 실제 코드 시안으로 생성하여 비교 선택하게 하는 스킬
Modifies files
Hook triggers on file write and edit operations
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
A workflow plugin for achieving production-grade design quality in vibe coding.
Structurally prevents common problems when building UI with AI — inconsistent colors, hardcoded styles, half-baked UI, and missing dark mode support.
Moodboards / previews made with this plugin:
The plugin guides you to collect design references (screenshots, moodboards) and organizes them within your project structure.
/design-start → Project init → PRD check
├─ No PRD → Co-create via conversation
└─ Has PRD → Read file
→ /design-research (Reference collection + web search)
→ /moodboard-gen (Generate 3 design directions)
→ User picks one → Remove the rest
→ /design-system-gen (Finalize DESIGN.md tokens/rules)
→ /design-preview (Generate key screen code)
→ /design-feedback (Feedback → Revise → Repeat)
→ Start frontend development
/save-referencecan be called at any point to add references.
| Feature | Description |
|---|---|
| Conversational PRD | Co-create a PRD through conversation, even without a planning doc |
| Reference-based Design | Set direction using web search + user-provided references |
| 3-option Moodboard | Pick from 3 design directions, discard the rest |
| Token-level Design System | Manage consistent rules via DESIGN.md |
| Feedback Loop | Revise → Apply → Confirm, repeat until satisfied |
claude plugin marketplace add hye-on/ai-builder-marketplace
claude plugin install my-design-flow-skills
claude --plugin-dir ./design-workflow-plugin
CLAUDE.md file in your project| Command | Description |
|---|---|
/design-start | Initialize project. Check PRD and start workflow |
/design-research | Collect references + analyze via web search |
/moodboard-gen | Generate 3 design directions. Uses option-d if user references exist |
/design-system-gen | Finalize DESIGN.md — define tokens and rules |
/design-preview | JSONC brief → Generate key screen code |
/design-feedback | Feedback → Token-level revision → Repeat |
/save-reference | Add references at any time |
This plugin is split into a shareable core and a personal extension area.
.gitignore — never pushed to remoteWhen collecting references:
The knowledge-base/ folder tracks the design status of your project.
npx claudepluginhub hye-on/ai-builder-marketplace --plugin my-design-flow-skillsYour shipping buddy. A collection of Claude Code skills that discover ecosystem tools, clone web products into skills, and pull insights from TikTok content — all from inside Claude.
Design workflow for coding agents: discovery, research, strategy, inclusive design, critique, and handoff — enforced automatically
Open-source, skills-based version of Claude Design (claude.ai/design) for Claude Code. HTML pages, slide decks, interactive prototypes, UI kits, and brand systems — with taste, context-matching, and anti-slop discipline.
Local-first design app · 139 skills + 150 DESIGN.md systems · exposes projects/files/preview tools to your coding agent over stdio MCP. Requires the `od` daemon on PATH.
Use this agent when creating user interfaces, designing components, building design systems, or improving visual aesthetics. This agent specializes in creating beautiful, functional interfaces that can be implemented quickly within 6-day sprints. Examples:\n\n<example>\nContext: Starting a new app or feature design
Generate distinct UI design variations, collect feedback, synthesize the best elements, and produce implementation plans
Comprehensive skill pack with 66 specialized skills for full-stack developers: 12 language experts (Python, TypeScript, Go, Rust, C++, Swift, Kotlin, C#, PHP, Java, SQL, JavaScript), 10 backend frameworks, 6 frontend/mobile, plus infrastructure, DevOps, security, and testing. Features progressive disclosure architecture for 50% faster loading.