my-design-flow-skills

Design Workflow Plugin for Claude Code

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.

---

Examples

Moodboards / previews made with this plugin:

Dosirak Kkumigi — Cute Lunchbox Design App

Eommisae — Mother-Daughter Communication App

Reference Collection in Action

The plugin guides you to collect design references (screenshots, moodboards) and organizes them within your project structure.

---

Workflow

/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-reference can be called at any point to add references.

---

Key Features

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

---

Installation

1. Add Marketplace (first time only)

claude plugin marketplace add hye-on/ai-builder-marketplace

2. Install Plugin

claude plugin install my-design-flow-skills

Local Testing (Development)

claude --plugin-dir ./design-workflow-plugin

---

Dependencies

Required

• Claude Code CLI
• CLAUDE.md file in your project

Optional (Recommended)

• Tailwind CSS v3+
• shadcn/ui component library
• Lucide Icons
• Chrome browser (for Claude in Chrome integration)

---

Skill Commands

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

---

Plugin Structure

This plugin is split into a shareable core and a personal extension area.

Plugin Core (Open Source)

• No automated scraping — references are provided by the user
• Complies with ToS of design sites (Mobbin, Dribbble, etc.)
• Safe to fork and share as-is

local-only/ (Personal, git-ignored)

• Included in .gitignore — never pushed to remote
• Place for personal automation scripts (Playwright capture, Glance MCP calls, etc.)
• Ships empty, extend freely as needed

---

Design Site ToS Notice

When collecting references:

• Always check the Terms of Service of design sites (Dribbble, Behance, Awwwards, etc.) before collecting screenshots
• Collected screenshots are for learning/reference purposes only
• Copying design elements directly may constitute copyright infringement
• Extract patterns and principles from references — do not replicate pixel-by-pixel
• Use only properly licensed assets for commercial projects

---

Knowledge Base

The knowledge-base/ folder tracks the design status of your project.