design-refiner

Rewrite vague UI, UX, and frontend requests into implementation-ready design briefs.

10|5|Updated Mar 3, 2026
One-click install
npx skills add https://github.com/JHostalek/dotclaude --skill design-refiner
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-refiner
Source: https://github.com/JHostalek/dotclaude/tree/main/skills/design-refiner
Command: npx skills add https://github.com/JHostalek/dotclaude --skill design-refiner

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill transforms vague UI, UX, and frontend build requests into specific, implementation-oriented design briefs without inventing requirements or executing the requested work.

Core Features & Use Cases

  • Expert reframing: Rewrites casual design requests using precise design and frontend terminology while preserving the author's intent, constraints, references, and chosen tools.
  • Requirement discovery: Identifies missing load-bearing details such as aesthetic direction, stack, motion behavior, scope, fidelity, and verification, then presents them as author-facing fill slots.
  • Use Case: Give it a request for a modern portfolio landing page with smooth animations, and it will produce a focused brief describing the appropriate interaction techniques while asking for unresolved design and implementation decisions.

Quick Start

Use the design-refiner skill with a UI build request, a file path containing the request, or the most recent user message to produce an expert design brief.

Frequently Asked Questions about design-refiner

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

FAQPage Schema
How do I turn a vague UI design request into a build-ready brief?

To turn a vague UI design request into a build-ready brief, use a prompt refinement process that rewrites casual frontend requests using precise terminology while identifying missing aesthetic, technical, and motion details as fill slots.

What is the best way to document missing UX requirements before frontend development?

Documenting missing UX requirements involves identifying absent load-bearing details like stack, scope, and fidelity, then translating them into author-facing fill slots instead of fabricating specifications, ensuring implementation direction remains explicit.

Can I use a design brief refiner for greenfield interface concepts?

Yes, you can use a design brief refiner for greenfield interface concepts. It processes new interface ideas to provide clearer aesthetic, technical, and verification direction while preserving your original intent and constraints.

How does prompt refinement handle implied interaction design techniques?

Prompt refinement handles implied interaction design techniques by translating casual descriptions into expert terminology, ensuring the resulting UX brief accurately specifies appropriate motion behavior and interaction patterns without executing the requested work.

What limitations exist when refining frontend build requests from reference files?

When refining frontend build requests from reference files, the limitation is that the process strictly rewrites requirements without executing the build, and it will report unresolved design decisions as fill slots rather than inventing missing specifications.