Public Demo

VI-first UI/UX
skill for coding
agents.

Visual Taste Lab helps agents stop making generic pages. It audits visual identity first, turns it into a design language, then applies that language to static pages, product demos, and brand systems.

View the demos Use the Skill

Static GitHub Pages demo. No external runtime. No real client names.

What it solves

A taste workflow agents can follow.

The skill separates visual identity from page construction. Instead of asking an agent to make a page nicer, it gives the agent a compact system for deciding what nicer means.

Find the VI anchor

Start with the mark, name, audience, color cues, and the type of site being built.

Assign color roles

Primary, support, accent, surface, line, and semantic colors each get a job.

Shape the evidence

Company pages, product pages, and content brands need different proof patterns.

Apply consistently

Typography, spacing, cards, buttons, tables, and CTAs all speak the same language.

Three fictional demos

Same skill, three different site types.

These are invented examples for public preview. They show how the workflow changes tone, layout, proof, and CTA behavior for different page goals.

Company Site

A stable, credibility-first page for a fictional operations studio. The layout foregrounds who the team is, what it organizes, and how visitors can evaluate fit.

Primary#18283A

Support#D7A32E

Accent#7D8B68

Ground#F8F2E7

Northline Studio

ProfileSystemsProofContact

Company language

Complex work, made legible for long-term partners.

A company site should explain the organization before it sells a single feature: positioning, capability boundaries, working model, and contact path.

View method See process

PositioningClear audience, services, and decision context.

CapabilitySystems, content, operations, and delivery rhythm.

EvidenceReadable proof blocks instead of loud claims.

ContactLow-friction inquiry paths and next steps.

Product Page

A direct, action-led page for a fictional dashboard tool. The visual system supports fast comprehension, active states, and a clear primary conversion.

Primary#080A14

Accent#93FF6C

Support#485FFF

Ground#F8FBFF

Pulseboard

PPulseboard

FeaturesTemplatesPricingLogin

Product-first page

Turn weekly signals into one shared operating view.

A product page should quickly answer what it does, how it behaves, why it is useful, and which action the visitor should take next.

12starter boards

5mfirst setup

0blank states

Revenue pulselive

Weekly focusnew

Team reviewready

Start from prompt

Content Brand

An editorial, rhythm-led page for a fictional publishing studio. The system relies on typography, spacing, and memorable content frames instead of sales-page density.

Primary#241A18

Accent#C54A34

Support#E2B95A

Ground#FBF5EB

Margin House

MMargin House

EssaysWorkArchiveAbout

Editorial brand language

Fewer modules, stronger memory.

A content brand page should create recognition through voice, editorial structure, image rhythm, and restrained calls to explore.

Read the flow Browse demos

Visual systems in plain languageEssay

When a page needs less furnitureNote

Design language as agent contextGuide

How it works

From taste request to reusable page system.

The workflow is intentionally small enough for coding agents to follow inside a repo, but structured enough to avoid one-off decoration.

Audit the identity and page type.

Collect the mark, name, existing colors, audience, content shape, and whether the page is a company site, product page, content brand, or another interface type.

Write a compact design language.

Define typography, color roles, spacing, surfaces, cards, buttons, proof blocks, imagery, motion, and anti-patterns before rebuilding the page.

Apply the system to real screens.

Update shared tokens and components first, then tighten the page structure so the visual decisions stay consistent across desktop and mobile.

Verify with screenshots.

Check the rendered page in desktop and narrow viewports, confirm it is non-empty, readable, and free of horizontal overflow.

Use the Skill

Give your coding agent a visual brief it can execute.

Paste a goal like this into a coding-agent session with the Visual Taste Lab skill installed. Add screenshots, links, or brand notes when you have them.

prompt.txt

/goal Use $visual-taste-lab to improve this website visually.

First distill a reusable design language from the repo, screenshots, links, and brand notes.
Start with a VI audit:
- logo or wordmark
- primary, support, accent, neutral, and semantic colors
- site type and audience
- typography, spacing, surfaces, components, CTA rules, and anti-patterns

Then apply the design language to the key pages.
Keep claims honest. Keep mobile clean. Verify with screenshots.