SkillHub

Skills julianoczkowski

designer-skills Skill collection

A collection of agent skills for designers who prototype and build with AI coding tools.

Source on GitHubSort and filter them in the skills list

601 stars on GitHub, Nov 9, 2026 · 7 skills · 1 bundle

Its bundle

  1. Designer Skills

    Bundle of 7 skills
    Use it when:
    You prototype or build interfaces with an agent and want it to follow a design process instead of jumping straight to code.
    It does:
    Settles decisions, writes a brief, plans structure, sets tokens, splits the work into tasks, builds in a named aesthetic and reviews the result.

    design-flow, design-brief, information-architecture, design-tokens, brief-to-tasks, frontend-design, design-review

    Age
    7 months
    Stars
    601
    Total Downloads
    6.1K
    Weekly Downloads
    100

Its skills, most installed first

  1. design-tokens

    Part of Designer Skills
    Use it when:
    You're setting up a project's visual system, or your tokens lack dark mode, a full spacing scale or motion values.
    It does:
    Extends any tokens you already have, reads the brief's aesthetic philosophy and derives values from frontend-design's parameters for it.
    type:workfloweffect:localneeds:nonedesign-systemdesign
    Age
    7 months
    Stars
    601
    Total Downloads
    6.1K
    Weekly Downloads
    79

  2. information-architecture

    Part of Designer Skills
    Use it when:
    You've written a design brief, or know what you're building, and need navigation and page structure settled before visual design.
    It does:
    Reads the brief if there is one, scans your routes, layouts and navigation components, then asks structural questions, each with its recommended answer.
    type:workfloweffect:localneeds:nonedesignplanninginterview
    Age
    7 months
    Stars
    601
    Total Downloads
    6.1K
    Weekly Downloads
    100

  3. design-review

    Part of Designer Skills
    Use it when:
    You've built a page or component and want it checked against the brief before shipping.
    It does:
    Reads the brief, inspects the new code for hardcoded values and duplicate components, and screenshots the running app at 375, 768 and 1280px.
    type:workfloweffect:localneeds:mcpneeds:browserdesignaccessibilityverification
    Age
    7 months
    Stars
    601
    Total Downloads
    5.9K
    Weekly Downloads
    67

  4. frontend-design

    Part of Designer Skills
    Use it when:
    You're building components, pages or an app and want a distinct look instead of generic AI output.
    It does:
    Scans your codebase for components, tokens, themes and fonts to reuse, commits to a named aesthetic and says why, then writes the code.
    type:workfloweffect:localneeds:nonedesignanti-slopmobile
    Age
    7 months
    Stars
    601
    Total Downloads
    5.6K
    Weekly Downloads
    59

  5. design-brief

    Part of Designer Skills
    Use it when:
    You're about to design a feature or page and want its direction settled before any UI is built.
    It does:
    Asks what you're building, scans the codebase for tokens, themes, components and fonts, then interviews you, recommending an answer to each question.
    type:workfloweffect:localneeds:nonedesigninterviewrequirements
    Age
    7 months
    Stars
    601
    Total Downloads
    5.4K
    Weekly Downloads
    43

  6. design-flow

    Only works as part of Designer Skills
    Use it when:
    You're starting a page or product from scratch and want the whole design process, not one step of it.
    It does:
    Lists the six phases, lets you skip any, then loads each phase's skill in turn and asks before moving on.
    type:workfloweffect:localneeds:nonedesignplanningagent-workflows
    Age
    7 months
    Stars
    601
    Total Downloads
    5.3K
    Weekly Downloads
    39

  7. brief-to-tasks

    Part of Designer Skills
    Use it when:
    You have a design brief and want to know what to build first.
    It does:
    Reads the brief, information architecture and tokens, sorts your existing components into reuse, modify or new, and turns the work into self-contained slices.
    type:workfloweffect:localneeds:noneplanningdesign
    Age
    7 months
    Stars
    601
    Total Downloads
    5.3K
    Weekly Downloads
    38