yy-design-ui

yy-design-ui

Description

Create a web interface design skill that matches Chinese aesthetics, focusing on a clean, refined, and harmonious design style, and generate front-end code that can be used directly.

Use Cases

• The user requests designs for interfaces such as web pages, landing pages, and dashboards
• The user requests the creation of front-end components or pages
• The user requests beautifying an existing UI
• The user mentions keywords such as "Chinese style", "localization", and "Chinese aesthetics"

Should not trigger:

• Reviewing the quality or security of existing UI code (should use yy-frontend-review and other code review skills)
• Only optimizing the logic implementation of existing components, without involving interface adjustments
• Generating graphic designs such as logos, icons, and illustrations (non-web interfaces)
• The user requests pure back-end or non-web UI

Technical Constraints

Default Rules

1. CSS Styling: Use native CSS by default, and do not introduce frameworks such as Tailwind or Bootstrap
2. UI Components: Implement components yourself by default, and do not rely on component libraries such as Element UI or Ant Design
3. Chart Implementation: Implement simple charts with SVG, and do not introduce libraries such as Chart.js or ECharts
4. External Resources: Try not to introduce CDN resources, and ensure offline availability

Exceptions

Third-party libraries may be used in the following cases (the reason must be explained in the code):

• The user explicitly specifies the use of a particular CSS framework or component library
• Complex charts (such as maps and 3D charts) genuinely require professional library support
• The user requests a rapid prototype demonstration and explicitly accepts external dependencies

Instructions

Step 1. Understand the Requirements

• Confirm the interface purpose and target users
• Understand technical constraints (framework, performance requirements)
• Confirm design style preferences
• Confirm whether third-party libraries need to be used(not used by default)

Step 2. Determine the Design Direction

• Choose a color scheme
• Determine font combinations
• Plan the layout structure

Step 3. Implement the Code

• Technology Selection：
  • Use native HTML/CSS/JS by default
  • Use SVG to implement charts
  • Do not introduce external CDN resources
• Follow the design principles (refer to resources/design-principles.md）
• Ensure responsive adaptation

Step 4. Design Specifications for the Hero Section of a Landing Page/Homepage

When designing a landing page or product homepage, follow the standard pattern below (for the complete code template, see templates/hero-template.md, and for the design principles, see resources/design-principles.md Section 7):

• Layout: A two-column grid with text on the left and a visual card on the right (1.1fr:0.9fr), with a white-to-light-gray gradient background
• Text Hierarchy: Badge label → main title (56px, w800) → subtitle (24px, w600) → description (16px, #86909c) → button group
• Visual Card: White rounded card + terminal-style red, yellow, and green three-dot decoration + float floating animation
• Buttons: Primary button (primary color background + shadow) + outlined button (gray border), hover moves up 2px
• Common components: Section title centered (36px/16px), card hover float-up effect
• Responsive: ≤968px single column, ≤640px smaller font size + full-width buttons

Step 5. Refine details

Confirm each item one by one according to the following checklist:

• Spacing and alignment: Whether element spacing uses an 8px baseline grid, and whether the visuals are balanced
• Motion effects: Whether interaction feedback (hover/click) is within 200-300ms, and whether the animation is smooth and natural
• Accessibility: Whether color contrast is sufficient, whether buttons have a :focus state, and whether images have alt text
• Consistency: Whether the border radius, font size, and spacing of components of the same type are unified
• Responsive: Whether the layout and font size adapt correctly at the two breakpoints 968px/640px

Step 6. Output the result

The output includes:

1. Design description: Color scheme, font selection, design concept
2. Complete code: HTML/CSS/JS or component code that can be run directly
3. Usage instructions: How to integrate and customize

Related resources

• resources/design-principles.md: Detailed explanation of design principles (color matching, font selection, whitespace layout, motion interaction, component specifications, Hero section design)
• templates/hero-template.md: Complete HTML/CSS code template for the landing page Hero section
• examples/output.md: Output example, showing the expected output format after designing the interface
• examples/dashboard-demo.html: Complete example code for a backend management system Dashboard