SkillHub

Skills

julianoczkowski

7 skills in one repo.

julianoczkowski on GitHub

designer-skills Skill collection

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

601 stars on GitHub, Nov 9, 2026 · 7 skills · 1 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
    bottom 16%
    Total Downloads
    6.1K
    bottom 28%
    Weekly Downloads
    100
    bottom 20%

  2. 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
    bottom 16%
    Total Downloads
    6.1K
    bottom 28%
    Weekly Downloads
    79
    bottom 15%

  3. 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
    bottom 16%
    Total Downloads
    6.1K
    bottom 28%
    Weekly Downloads
    100
    bottom 20%

  4. 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
    bottom 16%
    Total Downloads
    5.9K
    bottom 24%
    Weekly Downloads
    67
    bottom 13%

  5. 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
    bottom 16%
    Total Downloads
    5.6K
    bottom 19%
    Weekly Downloads
    59
    bottom 12%

  6. 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
    bottom 16%
    Total Downloads
    5.4K
    bottom 13%
    Weekly Downloads
    43
    bottom 11%

  7. 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
    bottom 16%
    Total Downloads
    5.3K
    bottom 9%
    Weekly Downloads
    39
    bottom 10%

  8. 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
    bottom 16%
    Total Downloads
    5.3K
    bottom 9%
    Weekly Downloads
    38
    bottom 10%