106.9K+Download
Skip to the usage guide
Design Flowby julianoczkowski

Design Flow Skill.

Guide a design project through explicit phases and saved artifacts.

  • Design Workflow
  • Review
Download OpenDesignView Usage Guide
Source Review · design-flowSKILL.md
Task Guide a design project through explicit phases and saved artifacts. Produces Feature-specific brief, information architecture and token artifacts as applicable. Before You Start The orchestrator depends on the named skills and their full instructions.
Editorial summary · source reviewed 2026-11-02 · not a generated example

01 What It Does

Guide a design project through explicit phases and saved artifacts

Run a guided sequence from design questions and information architecture to tokens, build tasks and implementation, with review requested separately.

Source-based workflowNot an execution benchmark

The Working Approach

Design Flow orchestrates the companion designer skills in a defined sequence. It begins with clarifying questions, records a brief, develops information architecture, establishes tokens and turns the brief into buildable tasks. Frontend implementation then follows that task list. Each stage has an explicit output and a transition that the designer confirms.

The source treats the workflow as resumable. Feature-specific artifacts live together under a .design folder, so work can continue from the next incomplete stage. Design review is a separate, requested step after something has been built; completing the sequence itself does not establish that a visual review has passed.

Expected Deliverables

  • Feature-specific brief, information architecture and token artifacts as applicable.
  • An ordered TASKS.md checklist followed during frontend implementation.
  • Built components and pages from the implementation phase, with saved planning artifacts available for resumption.
See the Example Brief

From Brief to Review

  1. 01
    Choose the necessary phases

    Explain the full sequence and identify stages that can be skipped. Existing tokens or a single-component scope may remove unnecessary work.

  2. 02
    Clarify and save design intent

    Run the relevant companion skills fully, preserving the brief and information architecture within the same feature folder. Confirm each phase before continuing.

  3. 03
    Translate intent into a build

    Generate or extend tokens, create the task list and work through its implementation slices. Check off completed tasks with confirmation between them.

  4. 04
    Review when requested

    Run the separate design-review skill only after a built interface exists and review is requested. Its screenshots and findings belong with the feature's other artifacts.

02 When to Use It

When to Use It

The orchestrator depends on the named skills and their full instructions.

A Good Fit

  • New feature planningA designer wants a guided path from an initial idea to implementation.
  • Interrupted projectsSaved feature artifacts allow the workflow to resume with earlier decisions intact.

Limits to Check

  • Companion skills requiredThe orchestrator depends on the named skills and their full instructions.
  • Explicit transitionsThe source expects confirmation between phases rather than silently running the entire sequence.
  • Separate reviewReview is not automatic and requires built code to examine.

Bring These Inputs

  • Project intentDescribe the feature, user goal and existing decisions.
  • Current repositoryProvide existing components, tokens and feature artifacts.
  • Workflow preferenceIdentify stages already complete or deliberately skipped.

03 Decisions That Matter

Decisions That Matter

  1. Connected decisions

    The brief informs architecture, tokens and implementation tasks.

  2. Scoped artifacts

    Separate feature folders prevent unrelated projects from overwriting each other.

  3. Clear resumption

    Existing artifacts show where to continue after a pause.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Source and Setup

Describe the feature, user goal and existing decisions.

Upstream Source File
https://github.com/julianoczkowski/designer-skills/blob/c259656c76d9758d7ead46b0d2f125cbe84f8665/design-flow/SKILL.md

The reference below opens the upstream instructions. Review the repository setup before using them; it is not an installation command.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief
Use design-flow for a new team activity page in this repository. First inspect existing .design feature folders and our current tokens. Explain the phase sequence and recommend which stages we can skip based on what already exists. Keep the brief, architecture and tasks together under one feature folder. Confirm each transition before proceeding and carry accepted decisions forward. During implementation, follow the task checklist. Leave design review as a clearly identified separate step unless I explicitly request it during the flow.

Inspect the Result

Check the actual output against these observable criteria.

  • Every phase artifact reflects decisions from the preceding stage.
  • Completed and skipped phases are distinguishable in the handoff.
  • Review is not described as passed solely because implementation finished.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesignRead the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner
julianoczkowski
Repository
julianoczkowski/designer-skills
Skill File
SKILL.md
License
Apache-2.0
Reviewed Snapshot
2026-11-02 · c259656c76d9
Editorial Source Summary
Guide a design project through explicit phases and saved artifacts.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Must every project run every phase?

No. The source explicitly supports skipping unnecessary phases, such as information architecture for a single component.

Where are the artifacts stored?

They are grouped under .design/<feature-slug>/ so each feature has its own record.

Does the flow run design review automatically?

No. Review is requested separately after components or pages have been built.

OpenDesign

Keep Your Brief and Design Work Together.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesignBrowse Design Skills
Upstream Source File
https://github.com/julianoczkowski/designer-skills/blob/c259656c76d9758d7ead46b0d2f125cbe84f8665/design-flow/SKILL.md