设计技能

Design and build web pages or app screens from an initial request. The workflow defines audience and visual direction, establishes shared style values, implements mobile layouts, and checks interaction states, responsive behavior, and the rendered result.

中文简介正在准备中。当前显示英语简介。

• Designing and building a new landing page
• Creating an app settings screen
• Designing an onboarding flow

Find brand logos and AWS, Azure, or GCP service icons from theSVG. Get embedding URLs or SVG markup, a scalable image format, and choose available variants that suit light or dark backgrounds.

中文简介正在准备中。当前显示英语简介。

• Add a brand logo to a README
• Collect service icons for an integrations page
• Gather cloud service icons for an architecture diagram

Generate React or HTML code from an approved Figma node using several settings, then preview the results locally. Compare framework and styling choices side by side and repeat the generate, preview, and tweak cycle while keeping each run's source revision and settings available for review.

中文简介正在准备中。当前显示英语简介。

• Comparing React and HTML output for one design
• Previewing generated components on a local Vite server
• Iterating on Figma-to-code output with different styling settings

Design a repeatable Figma-to-code workflow using Anima, from approved design inputs through code generation, normalization, checks, and human review. The result is a project architecture with clear boundaries for artifacts, credentials, and delivery.

中文简介正在准备中。当前显示英语简介。

• Planning a Figma-to-React project structure
• Designing a team design handoff pipeline
• Defining checks for generated components

Track Anima generation usage, reuse outputs when their source and settings still match, and regenerate only changed design elements. It helps teams review plan fit using current account data and report avoided work without guessing monetary savings.

中文简介正在准备中。当前显示英语简介。

• Reducing duplicate Anima generations
• Refreshing only components changed in Figma
• Reviewing Anima plan fit with account usage data

Set up the server-side Anima SDK for generating code from Figma designs. Configure Anima and Figma credentials, initialize the client, and verify access by generating files from a selected Figma node.

中文简介正在准备中。当前显示英语简介。

• Setting up Figma-to-code generation
• Configuring Anima and Figma credentials
• Checking access to a Figma file and node

Plan resumes for creative roles by balancing visual presentation with parsing by applicant tracking systems (ATS). It guides a two version approach, portfolio links, layout, typography, and when to use a plain application version or a designed resume.

中文简介正在准备中。当前显示英语简介。

• Choosing a resume format for an online application
• Planning a designed resume for networking
• Linking selected work or case studies from a resume

Design interfaces using the Nothing-inspired visual system, with clear type hierarchy, deliberate spacing, monochrome colors, and a considered dark or light mode. It guides composition and component choices for a restrained, information-rich UI.

中文简介正在准备中。当前显示英语简介。

• Designing a dashboard in Nothing style
• Applying the Nothing design system to a screen
• Choosing typography and spacing for a monochrome UI

Create editable SVG diagrams for documentation when a screenshot cannot clearly explain a gesture, alignment rule, or before-and-after state. Reuse the kit’s visual tokens, primitives, template, and examples to build consistent figures for product docs.

中文简介正在准备中。当前显示英语简介。

• Showing a drag or double-click gesture in documentation
• Comparing before-and-after UI states
• Illustrating alignment or anchor behavior

Create and arrange a Grida `.canvas` board by editing its manifest and bundled documents. Place reference images, generated files, and notes spatially on an infinite canvas, and update their order and layout; use a slides workflow for linear presentations.

中文简介正在准备中。当前显示英语简介。

• Starting a freeform visual project board
• Placing reference images and notes on an infinite canvas
• Adding generated image files to an existing board

Create or edit a Grida presentation as a `.canvas` bundle containing one 16:9 SVG file per slide. Organize slides through the bundle manifest, preserve a selected template’s visual style, and present a valid first slide while the deck is being built.

中文简介正在准备中。当前显示英语简介。

• Creating a presentation or pitch deck in Grida
• Adapting a selected slide template to new content
• Reordering, adding, or removing slides in a deck

Create and edit SVG documents in a Grida editor session, where changes can appear on the live canvas. The skill also guides recovery from parse errors and preserves existing dimensions, viewBox, and formatting when editing.

中文简介正在准备中。当前显示英语简介。

• Creating a new SVG graphic in Grida
• Editing an existing SVG while viewing canvas updates
• Fixing an SVG parse error

When a UI interaction or architecture has no precedent in the codebase, this principle recommends building two or three competing prototypes and comparing them side by side before deciding. It also applies to product choices where user experience depends on feel.

中文简介正在准备中。当前显示英语简介。

• Exploring a new UI interaction
• Comparing architectural approaches
• Testing product choices that depend on user feel

Use this principle when product, UX, or feature scope decisions arise. It helps weigh choices from the user's perspective, favoring a smaller set of polished features, clear feedback, and a focused core workflow over implementation convenience.

中文简介正在准备中。当前显示英语简介。

• Prioritizing features in a product
• Choosing between polish and implementation ease
• Refining a UI's central workflow

Use this skill to explain, create, update, or compare Excalidraw diagrams. It delegates diagram work to subagents, which return concise summaries of components and relationships instead of loading verbose drawing data into the main agent’s context.

中文简介正在准备中。当前显示英语简介。

• Explain components and connections in an Excalidraw diagram
• Add a component and connect it to an existing one
• Create a diagram from an architecture or flow description

Create and refine diagrams by editing `.drawio` XML, adjusting element positions, labels, and arrows, then converting the file to PNG for visual review. The skill also provides guidance for AWS icons, fonts, spacing, and diagrams used in slides.

中文简介正在准备中。当前显示英语简介。

• Adjusting the layout of a system diagram
• Converting a `.drawio` file to PNG
• Finding an AWS service icon for a diagram

Create or evolve a shared design system with tokens for color, type, and spacing, reusable component structures, accessibility guidance, and documentation templates. It helps teams define consistent UI patterns, including theming and dark mode, across products.

中文简介正在准备中。当前显示英语简介。

• Starting a design system for an app
• Defining reusable color, type, and spacing tokens
• Planning a component hierarchy for a product

Design readable, responsive interfaces for Three.js games, including HUDs, menus, overlays, settings, and touch controls. Plan game states, connect UI to game state, and check text fit, safe areas, overlap, and interaction on target screen sizes.

中文简介正在准备中。当前显示英语简介。

• Design a HUD and menus for a Three.js game
• Adapt game UI for mobile screens and touch input
• Review text fit and overlap across game states

Create or edit 2D art for Three.js games with Gemini’s image API, including concept references, textures, backgrounds, logos, icons, and interface art. Use existing images as inputs for revisions and save generated assets for game or 3D workflows.

中文简介正在准备中。当前显示英语简介。

• Creating character or prop references for image-to-3D
• Generating textures, decals, or material references
• Making game backgrounds, logos, icons, or menu art

Create, edit, and refine diagrams on an Excalidraw canvas. Arrange and connect elements, convert Mermaid diagrams, inspect screenshots, and import or export scene files and PNG or SVG images through the CLI, MCP tools, or REST API.

中文简介正在准备中。当前显示英语简介。

• Creating a flow or architecture diagram
• Adjusting elements in an existing canvas
• Converting Mermaid diagrams to Excalidraw

Builds image prompts from one of the skill’s illustrated styles, following its templates and selection steps. It can also prepare structured call details for certain styles. The skill outputs text and does not generate images.

中文简介正在准备中。当前显示英语简介。

• Creating a prompt in a named hand-drawn style
• Choosing a style from the available catalog
• Preparing a structured image-generation call for a supported style

Create professional research posters in LaTeX using beamerposter, tikzposter, or baposter. Support for conference presentations, academic posters, and scientific communication. Includes layout design, color schemes, multi-column formats, figure integration, and poster-specific best practices for visual communication.

中文简介正在准备中。当前显示原文说明。

Select, pair, and implement typefaces for web projects. Use when the user mentions "font pairing", "which typeface", "line height", "responsive typography", "web font loading", "type hierarchy", "variable fonts", "FOUT/FOIT", "typographic scale", or "the text is hard to read". Also trigger when choosing between system fonts and web fonts, optimizing font-loading performance, or designing readable long-form content. Covers readability evaluation, CSS implementation, and performance optimization. For overall UI design systems, see refactoring-ui. For dramatic typographic experiences, see top-design.

中文简介正在准备中。当前显示原文说明。

Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off" (or amateur/unprofessional), "fix the design", "Tailwind styling", "color palette", "visual hierarchy", "design system", "spacing scale", or "component styling". Also trigger when building consistent design tokens, creating dark mode themes, improving data-visualization clarity, or polishing UI details before launch. Covers grayscale-first workflow, constrained design scales, shadows, and component styling. For typeface selection, see web-typography. For usability audits, see ux-heuristics.

中文简介正在准备中。当前显示原文说明。