design-flow
design-flow walks you through the complete design process as a guided sequence, running each phase in order and waiting for confirmation before advancing. It orchestrates six core phases—from clarifying your thinking through building components—plus an optional design review, with the ability to skip phases you don't need and resume mid-project where you left off.
design-flow guides you through a complete design workflow in seven phases, from clarifying requirements through building and reviewing.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-06
design-flow guides you through a complete design workflow in seven phases, from clarifying requirements through building and reviewing. design-flow walks you through the complete design process as a guided sequence, running each phase in order and waiting for confirmation before advancing. It orchestrates six core phases—from clarifying your thinking through building components—plus an optional design review, with the ability to skip phases you don't need and resume mid-project where you left off.
Use it when
- design-flow guides you through six core phases: clarifying your thinking, defining requirements, creating designs.
- Yes.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
julianoczkowski/designer-skills/design-flow
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I run the full design workflow with design-flow?
design-flow walks you through a complete guided sequence from brief through frontend build. It orchestrates six core phases in order, waiting for your confirmation before advancing to each next step. You can run the entire workflow end-to-end, or skip phases you don't need and customize the sequence to fit your project.
What phases does design-flow take me through?
design-flow guides you through six core phases: clarifying your thinking, defining requirements, creating designs, reviewing designs (optional), building components, and finalizing your frontend. Each phase completes before moving to the next, giving you structured checkpoints throughout the entire design-to-build process.
Can I start a new project from scratch with design-flow?
Yes. design-flow is built to start new design projects with structured methodology. When you begin, it walks you through the complete process step by step, from your initial brief all the way through to a built frontend, confirming your readiness at each phase boundary.
Can I resume an in-progress design workflow?
design-flow supports resuming mid-project from saved artifacts. If you've already completed some phases, you can pick up where you left off rather than starting over, letting you continue your workflow without repeating earlier work.
Can I skip optional phases and customize the design flow sequence?
Yes. design-flow lets you skip phases you don't need and customize the order of your workflow. The design review phase is optional, and you can tailor the sequence to match your project's specific requirements and constraints.
What makes design-flow a guided process?
design-flow orchestrates a multi-phase design process with confirmation between each step. Rather than running all phases at once, it pauses after each phase to wait for your approval before advancing, ensuring you stay in control and can review outputs before moving forward.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
This skill orchestrates the full designer workflow by running each skill in sequence. You are a guide walking the designer through each phase. Do not rush. Each phase must be completed and confirmed before moving to the next.
Example prompts
- "Run the full design flow"
- "Walk me through the complete process for a new project"
- "Start from scratch and take me through everything"
- "Design flow for a dashboard app"
The Sequence
1. Grill Me → Clarify thinking
2. Design Brief → Document intent
3. Info Architecture → Define structure
4. Design Tokens → Establish visual system
5. Brief to Tasks → Plan the build
6. Frontend Design → Build it
—
7. Design Review → Run separately when ready
Rules
- At the start, tell the designer what the full sequence looks like (phases 1-6, with review available
(truncated - see the full file via the links below)
File tree — 1 file
design-flow/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Run a complete guided design workflow from brief through frontend build”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill transforms a design brief into a structured task list where each item is a vertical slice—a complete, self-contained piece of work that can be built and verified independently. It scans your codebase for existing components and tokens, then orders tasks by dependencies, visual priority, and risk to keep your build moving forward efficiently.
Design Brief walks you through a structured conversation to define a new feature or page, then scans your codebase for existing design tokens, components, and patterns. It produces a markdown brief that captures the problem, solution, design principles, aesthetic direction, and component inventory—ensuring your design extends rather than duplicates existing work.
This skill executes a comprehensive design review by comparing your built application against the design brief and aesthetic direction. It captures screenshots across responsive breakpoints, analyzes visual hierarchy and consistency, and produces a prioritized refinement list organized by severity.
This skill guides you through defining the structural skeleton of a product or site—the navigation, page hierarchy, URL patterns, and user flows that sit between your design brief and build phase. It examines your existing codebase, interviews you on key structural decisions, then generates a complete IA document with sitemaps, navigation models, content priorities, and growth strategies.
frontend-design generates working frontend code with intentional aesthetic direction, grounded in named design philosophies. Choose or describe a visual style—Scandinavian warmth, Swiss objectivity, Japanese restraint, Brutalist rawness, or others—and receive code that reflects that philosophy through typography, color, layout, and motion. The skill scans your codebase first to respect existing components and tokens.
This skill creates a complete token foundation for new projects, generating semantic color tokens, spacing scales, typography systems, and motion parameters in your project's native format—whether Tailwind, CSS custom properties, or theme files. It always includes intentional light and dark mode palettes derived from your chosen design philosophy.