Use TypeUI with Eve

From the directory where you want the agent project, scaffold a new Eve agent:

npx eve@latest init typeui-agent
cd typeui-agent

Eve creates an agent/ directory for the agent configuration and skills.

Choose a system from TypeUI design skills, and download the folder with skill files.

AtlasPaperAstraMinimalKineticBentoCreamMaterialCodexNeobrutalism

Create a packaged Eve skill and place the downloaded TypeUI SKILL folder inside it:

mkdir -p agent/skills/typeui-design

Unzip the downloaded TypeUI folder and copy its markdown files into agent/skills/typeui-design:

Eve will advertise the skill description to the model and load the full markdown when a UI task needs it.

Open agent/instructions.md and add design workflow guidance:

# Design workflow

When the user asks you to build, redesign, or review UI, load the TypeUI design skill before implementing. Treat the TypeUI skill as the source of truth for visual direction, typography, spacing, colors, components, interaction states, and accessibility rules.

When a user names a specific product, audience, page type, or component, adapt the TypeUI design skill to that context without ignoring its constraints.

This keeps the agent general-purpose while making the TypeUI design skill active for frontend work.

Start the Eve development runtime:

npm run dev

If you added Eve manually to an existing app, run:

npx eve dev

Ask Eve to build UI and name the TypeUI design skill if you want to force activation:

Build a SaaS pricing page. Use the TypeUI design skill for the visual system.

For follow-up work, keep the prompt specific:

Redesign the empty state so it follows the TypeUI skill more closely.