1. Habit
  2. Skills
  3. Design Flow skill
julianoczkowski · 5K installs

Design Flow skill
Runs by itself, you start a feature.

Takes features from idea to UI.

Install the Design Flow skill and make it a habit: follow https://gethabit.dev/skills/julianoczkowski/design-flow.md

  1. 1Copy
  2. 2Paste into Claude Code, Codex or Cursor
  3. 3It runs by itself

5K installs589 starsApache-2.0 licenceSource on GitHub ↗

Design Flow

by julianoczkowski · 5K installs

The skill

The design flow skill runs the full design-to-build workflow as a guided sequence: grilling, design brief, information architecture, design tokens, task planning and frontend build, with review on request.

Only when you ask.

The habit

Takes features from idea to UI.

↻ Runs by itselfyou start a feature

How the habit works.
You don't have to.

Three questionsWhen does it start? How does it check its work? What does it remember?

One run, step by step.
Then it stops.

Stop ruleStops after one phase per confirmation; you can stop at any phase.

  1. 01

    Show the sequence

    Your agent lists phases 1-6 and asks which to skip.

  2. 02

    Clarify and brief

    It runs grill-me, then design-brief to write DESIGN_BRIEF.md.

  3. 03

    Structure and tokens

    It runs information-architecture and design-tokens, carrying the brief's choices forward.

  4. 04

    Plan the build

    It runs brief-to-tasks to write TASKS.md.

  5. 05

    Build task by task

    It runs frontend-design, checking off each task and confirming with you.

  6. 06

    Review on request

    Only when you ask, it runs design-review to write DESIGN_REVIEW.md with screenshots.

What it may do.
Nothing more.

Safe by defaultIt writes only in its own folder and asks you before anything goes out.

Is it for you?
Use it when it fits.

Quick checkRead both lists. If the left one sounds like you, the Design Flow skill helps.

Use it when

  • ✓ You start a project from scratch
  • ✓ You want the full design process
  • ✓ You resume a paused design flow

Skip it when

  • – You only need one small component tweak
  • – You already have a finished brief and tasks

Questions

Design Flow skill, answered.

Can I resume later?

Yes. It reads the files in .design/ and continues from the next incomplete phase.

Does the review run automatically?

No. Run /design-review when something is built.

How do I install the Design Flow skill?

Copy the prompt at the top into your agent. It installs the skill from julianoczkowski/designer-skills and sets up the habit. Or run npx skills add julianoczkowski/designer-skills --skill design-flow.

Is the Design Flow skill free?

Yes. It is published under Apache-2.0. Habit is free too.

Design Flow. Now as a habit.

Install the Design Flow skill and make it a habit: follow https://gethabit.dev/skills/julianoczkowski/design-flow.md

  • Free
  • No account
  • Undo in one line

All julianoczkowski skills →More design skills →

Works in

  • Claude Code
  • Codex
  • Cursor
  • ChatGPT
  • Claude app

Made by julianoczkowski, published under Apache-2.0. Habit links to the original and never changes it. Is this your skill?

Copying didn't work here. Select the line and copy it by hand.