design-blueprintlisted

Turns a rough project idea into a complete, frontend-ready design package, covering brand direction, user flows, HTML/CSS screen mockups, design tokens, and a component spec. Use this whenever the user wants to figure out branding, visual identity, UI, or user flow for a new project or feature, even if they describe it casually ("I need to figure out the look and feel", "what should this app's UI be like", "help me design the branding"). Also trigger on explicit invocation ("use my design blueprint process", "/design-blueprint", "run the design system process"). Works standalone, or after spec-blueprint if a spec or blueprint doc already exists. Do NOT use this for writing the PRD/TRD, database schema, or implementation plan/timeline, that is spec-blueprint's job, and do NOT use it for small one-off tweaks to an existing design (a color change, a single component fix) where the user is not asking to establish a system.
Kodenaime/kode-claude-skills · ★ 1 · Web & Frontend · score 74

Install: claude install-skill Kodenaime/kode-claude-skills

# Design Blueprint A four-phase process for turning a rough project idea into a frontend-ready design package: brand direction, user flows, key screen mockups, and a component spec. Each phase produces an artifact the next phase builds on. Don't skip phases or collapse them together: each one forces a level of clarity the next phase depends on, the same way spec-blueprint's phases do. This skill is a sibling to spec-blueprint, not a dependency of it. It works completely standalone. If a spec-blueprint document (or any doc describing the product, users, and platform) already exists in the conversation or workspace, pull context from it instead of re-asking questions it already answers, but never require it. ## Before starting: check for existing context Look for a spec-blueprint doc, PRD, or similar already in the conversation or uploaded files. If one exists: - Extract what's already answered (target users, platform, core flows, constraints) and skip re-asking those in Phase 1. - Confirm your extraction briefly with the user before proceeding, for example: "I see you're building X for Y, I'll skip straight to brand direction questions." If nothing exists, start fresh at Phase 1. ## Phase 1: Interactive discovery Ask the user one question at a time, the same discipline as spec-blueprint's Phase 1: - Exactly one question per message. Never bundle multiple questions. - Each question builds on the previous answer. Don't work off a fixed checklist. - Keep questions concre