design

Orchestrates UI design workflows from planning to visual validation for web, iOS, and macOS.

1|Updated Dec 30, 2025
One-click install
npx skills add https://github.com/tyroneross/interface-built-right --skill design-tyroneross
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/tyroneross/interface-built-right/tree/main/.codex-plugin/skills/design
Command: npx skills add https://github.com/tyroneross/interface-built-right --skill design-tyroneross

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill solves the lack of structure and design intent in AI-generated UI by providing a deterministic framework for planning, building, and validating interfaces.

Core Features & Use Cases

  • Design Director Planning: Orchestrates the full design-to-validation flow, ensuring UI builds align with platform-specific archetypes and design principles.
  • Visual Validation: Uses deterministic rules and interaction assertions to verify that live pages match wireframe or visual targets.
  • Use Case: When building a new dashboard, use this skill to generate a design contract, plan the component architecture, and validate the final implementation against your visual targets.

Quick Start

Use the design skill to initiate a new build for the user dashboard by capturing the platform, scope, and primary user goals.

Frequently Asked Questions about design

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

FAQPage Schema
How do I plan and validate UI architecture for AI-generated web interfaces?

Plan and validate UI architecture by applying a deterministic framework that orchestrates design-to-validation flows, ensuring interface builds align with platform-specific archetypes and visual targets.

Can I use deterministic rules to test interactions on iOS and macOS interfaces?

Yes, you can test interactions on iOS and macOS interfaces using deterministic rules and interaction assertions to verify that live pages match wireframe or visual targets.

What is the best way to maintain design intent when building dashboards with AI agents?

Maintain design intent by generating a design contract that documents planning, component architecture, and visual validation rules before implementing the dashboard interface.

Does this UI design planning approach work without external dependencies?

Yes, this UI design planning approach works without external dependencies, relying on internal references and platform-specific archetype routing to guide the interface build.

Why does my AI coding agent produce inconsistent UI components across different platforms?

Inconsistent UI components occur when lacking platform-specific archetype routing; applying a structured design planning framework enforces adherence to designated design principles.