skills.rest
fysoul17
fysoul17COMMUNITY
Explore all skills by this author →
𝕏@0xMcDonAltGitHub

devlyn:design-ui

Generate multiple distinct HTML/CSS UI style samples from a product brief.

4|Updated Feb 23, 2026
Search Tags:#design systems#ui design#stakeholder alignment#style exploration#html css#ux direction#image reference replication
One-click install
npx skills add https://github.com/fysoul17/ian-on-v1 --skill devlyn-design-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: devlyn:design-ui
Source: https://github.com/fysoul17/ian-on-v1/tree/main/.claude/skills/devlyn%3Adesign-ui
Command: npx skills add https://github.com/fysoul17/ian-on-v1 --skill devlyn-design-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of getting stakeholders aligned on UI direction by rapidly producing multiple, distinct, portfolio-quality design style explorations instead of vague mockups.

Core Features & Use Cases

  • Mission control for design direction: Assembles a specialist design team to explore N radically different UI aesthetics for the same product brief.
  • Reference-aware replication: If you provide image references, it prioritizes faithful style replication in the early set while still generating meaningful variations.
  • Implementation-ready outputs: Produces N HTML/CSS style samples designed to be directly usable as design statements, with consistent structure across directions.

Quick Start

Use the devlyn:design-ui skill with a brief describing your product and include a count like count:3 to generate three distinct UI style explorations.

Frequently Asked Questions about devlyn:design-ui

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

FAQPage Schema
How do I generate multiple UI style explorations from a single product brief?▼

UI style exploration is the process of producing multiple radically distinct visual aesthetics for the same product brief. It generates self-contained HTML/CSS samples to help stakeholders align on a specific design direction.

Can I use image references to guide the UI design direction?▼

Yes, providing image references constrains the output to prioritize faithful style replication in the initial set. The system still generates meaningful variations alongside the replicated aesthetics for the product brief.

What is the maximum number of distinct design style samples I can generate at once?▼

You can generate a maximum of 10 distinct UI style samples at once. The system clamps the requested count token from your brief to a range of 1 to 10 before orchestrating the design team output.

Does this tool produce implementation-ready code for web UI style exploration?▼

Yes, the web UI style exploration produces implementation-ready HTML/CSS outputs. These self-contained samples are designed to be directly usable as design statements for landing pages, dashboards, and alignment tasks.

How do I align stakeholders on a new UX direction without vague mockups?▼

Align stakeholders on a UX direction by generating multiple portfolio-quality HTML/CSS style explorations instead of vague mockups. Presenting radically distinct aesthetics for the same brief rapidly resolves directional disagreements.

Related Skills

Explore More Design & Creative Skills→
wukangcheng2944wukangcheng2944

shape

Conduct a structured interview to gather context and produce a design brief.

Community
Intermediate
RUSHYOPRUSHYOP

frontend-design

Generate production-grade frontend interfaces with design constraints and UX guidelines.

Community
Advanced
tianguzhetianguzhe
1

frontend-design

Generate production-grade frontend interfaces with HTML, CSS, and React components.

Community
Advanced
inbharataiinbharatai
22

canvas-design

Design and render graphics on HTML5 Canvas with JavaScript.

Community
Intermediate