skills.rest
sonhaicoder
sonhaicoderCOMMUNITY
Explore all skills by this author →
GitHub

web-taste

Generate web UI artifacts through a 3-turn workflow with guardrails.

Updated May 5, 2026
Search Tags:#automation#guardrails#web-ui#frontend-design#artifact-generation#anti-slop#brand-direction
One-click install
npx skills add https://github.com/sonhaicoder/haiclaudeskill --skill web-taste
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-taste
Source: https://github.com/sonhaicoder/haiclaudeskill/tree/main/skills/web-taste
Command: npx skills add https://github.com/sonhaicoder/haiclaudeskill --skill web-taste

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Anti-Slop Frontend — a deterministic skill that forces quality UI artifacts by applying guardrails across 3 turns.

Core Features & Use Cases

  • Discovery-driven workflow: Turn 1 emits a Discovery Form to lock the brief before any design.
  • Direction locking: Turn 2 offers 5 deterministic directions or brand spec extraction, feeding rest of the process.
  • Artifact delivery: Turn 3+ executes TodoWrite with 27 anti-pattern checks and a 5-dim critique, producing a single artifact ready to ship.
  • References and starter design systems guide the creative guardrails and ensure Kimi/Lovable-tier quality.
  • Optional resources: references (directions, motion recipes, hero templates, etc.) and starter design systems to accelerate craft.

Quick Start

Provide a design brief to start Turn 1; I will perform the 3-turn workflow and return a complete artifact.

Frequently Asked Questions about web-taste

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate web UI artifacts without inconsistent frontend design?▼

To generate web UI artifacts with consistent frontend design, use a deterministic workflow that enforces design guardrails through a structured 3-turn process. This locks the brand direction and applies anti-pattern checks to ensure high-quality, ready-to-ship UI output.

What is a discovery form in frontend design automation?▼

A discovery form in frontend design automation is an initial questionnaire emitted during the first turn to lock the project brief before any visual design begins. It ensures the final UI artifact strictly aligns with user requirements and brand direction.

How do I enforce brand direction and anti-slop guardrails in UI generation?▼

You can enforce brand direction and anti-slop guardrails by using a structured artifact generation workflow. It extracts brand specifications during the second turn and applies 27 anti-pattern checks before finalizing the web UI.

Can I use starter design systems to accelerate web UI artifact generation?▼

Yes, you can use optional starter design systems and references like hero templates to accelerate web UI artifact generation. These resources guide creative guardrails and ensure the output meets premium tier quality standards.

What are the limitations of deterministic UI artifact generation?▼

The main limitation of deterministic UI artifact generation is its rigid 3-turn workflow. It requires completing a discovery form, direction locking, and TodoWrite finalization, which may restrict spontaneous design iterations or rapid unconstrained prototyping.

Related Skills

Explore More Design & Creative Skills→
danger-Englishdanger-English
2

brainstorming

Coordinate structured ideation to turn vague ideas into concrete design directions.

Community
Advanced
prateekprateek

trycycle-executing

Execute implementation plan tasks sequentially with red/green/refactor cycles.

Community
Advanced
willyu1007willyu1007

frontend-design

Define a distinctive visual direction for user interfaces.

Community
Basic
aresbitaresbit
46

web-design-guidelines

Analyze frontend UI implementations against Web Interface Guidelines and output file:line findings.

Community
Intermediate