Skillslab

Compare your agent's designs based on what skills it uses.

Skillslab allows you to build several designs with coding agents with different skills so you have many options instead of one.

Support

• Claude Code
• Codex

Skillslab doesn't try to detect which one you're using. It writes and maintains both root files unconditionally, so whichever agent reads them gets the same instructions and the same subagent-per-skill build strategy.

Install

npx skillslab

Run this inside a project you're using with Claude Code or Codex. It sets up automatically and opens a dashboard at http://localhost:4321. Running it again just reopens the dashboard.

How it works

1. Ask your agent for a design, same as usual: "landing page for my running-shoe brand." It generates 9 versions into a .skillslab/ folder instead of touching your project.
2. Watch them arrive. The grid appears right away and each version fills in as it's built.
3. Compare them. They're live pages, not screenshots, so hover states, animations, and scrolling all work. Resize the preview for mobile/desktop, or recolor any version with the built-in color editor.
4. Click the one you like, then Use this design. A popup confirms the pick and reminds you what to say next. Nothing to copy, nothing to paste.
5. Tell it what to do with it, in your own words: "apply this to the pricing page", "make it denser", "try it dark." It knows which design you mean.

Applying is the only step that changes your real project. Your agent will:

• Ask what to take from the design and where to put it
• Match your existing styling setup instead of dropping in raw code
• List the files it intends to change before editing anything
• Build fresh (and skip the questions) if the project has no UI yet

Note

If your prompt is too specific, don't expect much difference between the results.

Choosing skills

By default each direction is built three ways, using the impeccable, design-taste-frontend, and hallmark skills. Change that from the Settings button in the dashboard. Any skill installed in Claude Code or Codex works, not just the defaults, just type its name.

• Pick 1 to 6 skills. The dashboard lays out a column per skill.
• Changing this affects your next design request only; existing runs keep the skills they were built with.
• The same panel sets how many directions to invent (1 to 6) and whether to use subagents. Subagents are on by default: one per skill, each building every direction for its own skill, so the skills never see each other's work.

The first time you run Skillslab on a new machine, it opens straight to this picker instead of an empty dashboard. Pick your skills and direction count once, and every project after that starts from the same choice. Change it per-project anytime from the Settings button.

Where things live

• Everything sits in .skillslab/ inside your project, separate from your actual code. Delete it or gitignore it whenever you want.
• Your first-run choice is also saved to ~/.skillslab/config.json, outside any project, so new projects pick up your defaults automatically instead of asking again. The Settings button only updates the project you're currently in.
• Skillslab adds a small block to your project's CLAUDE.md and AGENTS.md so both agents follow this workflow. Edit either file yourself and Skillslab leaves your changes alone from then on; it only ever refreshes its own, unedited copy.

Remove both hooks with:

npx skillslab uninstall

Commands

npx skillslab              # set up if needed, open the dashboard
npx skillslab --port 5000  # use a different port instead of 4321
npx skillslab --no-open    # skip opening the browser
npx skillslab uninstall    # remove the CLAUDE.md and AGENTS.md hooks, keep your designs

FAQ

All designs look the same. Your prompt was probably too specific. Give it an idea without giving too much detail. Open the Subagent prompt toggle to check whether it over-planned it.

Two designs in the same row look like different ideas. Each subagent decides what the design should look like, so there may be deviations, or it might just be different skills causing very different designs.

Do subagents cost a lot? One per skill, not one per design, so the number of subagents is equal to the number of skills you use. You can toggle it off in the dashboard, but that causes the agent to have the context of outputs by different skills, which may lead to a less controlled comparison/less differences.

How does it know to start a new run? Every request is a new run in its own folder. Recoloring edits in place and keeps the original as index.base.html.

Can I apply to just one page? Yes, just say so: "apply this to the pricing page". It works out which files that means. Say nothing and it asks.

Why did it ask me to pick skills before I'd even asked for a design? That only happens once per machine. Your choice is saved to ~/.skillslab/config.json, and every project after that inherits it automatically — you won't see it again unless you delete that file.

Requirements

• Node.js 18+
• Claude Code and/or Codex, with whichever skills you configure installed (in .claude/skills/ or .codex/skills/, project or global). The defaults are impeccable, design-taste-frontend, and hallmark.

License

MPL-2.0