skills.rest
hiktan44
hiktan44COMMUNITY
Explore all skills by this author →
GitHub

UX Architect

Design CSS design systems and layout frameworks for web development projects.

Updated Aug 27, 2026
Search Tags:#ui#architecture#frontend#design system#css#ux#developer handoff
One-click install
npx skills add https://github.com/hiktan44/deer-flow --skill ux-architect-hiktan44
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: UX Architect
Source: https://github.com/hiktan44/deer-flow/tree/main/skills/public/design-ux-architect
Command: npx skills add https://github.com/hiktan44/deer-flow --skill ux-architect-hiktan44

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides developers with the essential technical architecture, CSS systems, and clear implementation guidance needed to build robust and scalable user interfaces, bridging the gap between project specifications and functional code.

Core Features & Use Cases

  • CSS Design Systems: Generates comprehensive CSS variable systems for colors, typography, and spacing, along with layout frameworks using modern CSS Grid and Flexbox.
  • UX Structure Planning: Defines information architecture, visual weight systems, and interaction patterns to ensure a professional and user-friendly baseline.
  • Developer Handoff: Creates clear, implementable specifications and documentation, including theme toggle functionality and file structure guidelines.
  • Use Case: A project manager provides a list of features for a new website. The UX Architect agent will translate these into a foundational CSS design system, a responsive layout framework, and a clear structure for developers to build upon, ensuring consistency and scalability from the start.

Quick Start

Use the UX Architect skill to generate a CSS design system foundation based on the provided project specifications.

Frequently Asked Questions about UX Architect

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

FAQPage Schema
How do I create a CSS design system with variables and spacing scales for web development?▼

You can generate a CSS design system by defining comprehensive CSS variable systems for colors, typography, and spacing scales, alongside layout frameworks using modern CSS Grid and Flexbox.

What is the best way to structure information architecture and component naming conventions for frontend handoff?▼

The best way to establish information architecture is by defining visual weight systems, interaction patterns, and clear component naming conventions to ensure a professional baseline and clear implementation guidance for developers.

Can I generate responsive breakpoint strategies and layout frameworks from project specifications?▼

Yes, you can translate project specifications and feature lists into a foundational CSS design system, a responsive layout framework with breakpoint strategies, and a clear file structure for developers to build upon.

Does this approach provide theme toggle functionality and file structure guidelines for scalable interfaces?▼

Yes, this approach creates clear, implementable specifications and documentation that specifically include theme toggle functionality and file structure guidelines to bridge project specifications and functional code.

When do I need technical architecture and UX foundations for my web development project?▼

You need technical architecture and UX foundations when starting a new website project to ensure consistency and scalability from the start, bridging the gap between project specifications and functional frontend code.

Related Skills

Explore More Design & Creative Skills→
xiaoweidotnetxiaoweidotnet
22

spec-driven-development

Generate structured technical specification documents defining project scope, architecture, and success criteria.

Community
Intermediate
vuralserhat86vuralserhat86
43

figma_integration

Convert Figma variables to CSS and Auto Layout to Flexbox or Grid.

Community
Intermediate
Yoriichi-DangYoriichi-Dang

web-component-design

Guide design of reusable UI components across React, Vue, and Svelte.

Community
Basic
bacchus-labsbacchus-labs
4

figma-design-workflow

Generate Figma mockups from wrangler specifications with design system integration.

Official
Advanced