Do I need a subscription or a scene pack?

No. The UI Skill is free to download and can design from your own brief. An active paid subscription is needed only for downloading optional scene packs from this website.

Can I use the UI Skill in Codex and Claude Code?

Yes. Install it in the matching directory above. Invoke $ai-ui-designer in Codex or /ai-ui-designer in Claude Code, then describe your design task.

Will the UI Skill generate a working application?

This workflow produces static SVG wireframes and UI designs. Application code, backend services, and working interactions need a separate implementation task.

What if my assistant cannot find the Skill?

Check that ai-ui-designer contains SKILL.md directly and is in the correct skills directory. If it still does not appear in Codex, restart the app. In Claude Code, look for /ai-ui-designer in the command menu.

Free design workflow · Codex / Claude Code

A Free UI Skill for Codex & Claude Code

Turn your brief into SVG wireframes and UI designs you can review before you build. The free UI Skill works from your own requirements, with no scene pack needed.

Download free UI Skill Installation steps

No sign-in to download. Static SVG output. Your coding assistant and model usage are separate.

One brief. A layout you can refine.

Describe the page, review its structure, then work on the visual details.

SVG product-poster wireframe with product fields, size choices, a generate action, and four result cards — 02 Review the wireframe

Colored SVG design of the same product-poster tool with violet controls and bottle-poster artwork — 03 Refine the UI

From a brief to an editable design

This product-poster example shows the free UI Skill workflow without a paid scene pack. Both SVG files are available to inspect: the same fields, actions, and results carry through from wireframe to visual design.

01 Describe your page

Use the ai-ui-designer skill.
Design a product-poster tool with a product name, selling points, a size selector, a generate action, and a results grid.

Example task: tell your assistant what the page needs to do.

Install the UI Skill and make your first design

Download and unzip the package. Use an existing Codex or Claude Code environment, then place the ai-ui-designer folder in the matching skills directory.

1.Install the Skill files
Keep SKILL.md directly inside the ai-ui-designer folder. The download includes the design instructions, references, and helper scripts.
Codex
~/.agents/skills/ai-ui-designer/
Claude Code
~/.claude/skills/ai-ui-designer/
Check that the ZIP has not added an extra nested folder.

2.Ask for a first wireframe

Select the Skill in your assistant and describe a page, its audience, and its main action.

Codex: $ai-ui-designer
Claude Code: /ai-ui-designer

Design an SVG wireframe for my product homepage with a value proposition, features, and a sign-up action.

3.Open the SVG and request a revision
Review the generated file in an SVG viewer or browser. Ask for a specific change, such as clearer headings or more space around the main action.
If the UI Skill is not listed, check the folder path and SKILL.md. Codex detects changes automatically; if it still does not appear, restart Codex. In Claude Code, check the / menu.

Use your own coding assistant and model access. Local scene-pack helpers require Python 3.9 or later; optional website pack downloads require an active paid subscription.

Make design decisions in manageable steps

Start with structure

Use the UI Skill to organize page hierarchy, content blocks, form fields, and actions in a grayscale wireframe.

Refine the visual design

Adjust typography, spacing, colors, and artwork while keeping the layout you have already approved.

Keep working on the same design

Continue your task with concrete feedback. Keep the design files in your project and revise them as requirements become clearer.

What the free download includes

The free workflow

The UI Skill includes wireframing, colored UI design, theme application, and local pack management. Start directly from your own brief.

Scene packs are optional design references. You can use the free workflow without downloading one.

Static designs, ready for review

The output is SVG design files and design guidance. Buttons drawn in the design do not run sign-in, payment, or image generation.

Building the application is a separate development task. Your assistant’s availability and model usage follow that tool’s own terms.

Before you start

Do I need a subscription or a scene pack?: No. The UI Skill is free to download and can design from your own brief. An active paid subscription is needed only for downloading optional scene packs from this website.
Can I use the UI Skill in Codex and Claude Code?: Yes. Install it in the matching directory above. Invoke $ai-ui-designer in Codex or /ai-ui-designer in Claude Code, then describe your design task.
Will the UI Skill generate a working application?: This workflow produces static SVG wireframes and UI designs. Application code, backend services, and working interactions need a separate implementation task.
What if my assistant cannot find the Skill?: Check that ai-ui-designer contains SKILL.md directly and is in the correct skills directory. If it still does not appear in Codex, restart the app. In Claude Code, look for /ai-ui-designer in the command menu.

Give your next page a clear starting point

Download the free UI Skill, install it in your coding assistant, and turn your brief into a layout you can inspect and refine.

Download free UI Skill Back to installation