Results for “spacing”

Handoff text-spacing extractor SKILL — 從 canonical HTML/JSX/TSX inline style 盡量抽出字間距與空間細節（letterSpacing, gap, padding, margin, fontSize, lineHeight 等），並回補到 Design System/design_handoff/source/ui-design-tokens.json 的 handoffTextSpacingExtracted 區段。USE FOR: UI 對齊前先把參考圖 / handoff source 的 spacing recipe 轉成可重用 token；DO NOT USE FOR: 只有 runtime 截圖、沒有 source 設定，或純 CSS module / computed style 無法直接讀取的場景。

The English summary is being prepared. Showing the original description.

Structure a page with a centered outer frame and inset inner sections. Use visible boundaries, corner markers, backgrounds, borders, and rounded corners to distinguish content levels while keeping spacing consistent and text readable.

• Establishing visible boundaries for a page
• Separating hero, feature, proof, and CTA sections
• Aligning inset spacing across content blocks

Organize colors, spacing, and typography into reusable design tokens, or shared style values. Generate CSS variables, define component states, check for hardcoded values, and create HTML presentations that follow the same brand rules.

• Standardize colors, spacing, and typography
• Document button states and variants
• Check code for hardcoded style values

Review a site's visual quality, find inconsistent styling, awkward spacing, unclear emphasis, repetitive AI-generated design patterns, and slow interactions. Fix the source code in focused commits and verify the changes with before-and-after screenshots.

• Finding inconsistent styling across a site
• Fixing spacing and visual emphasis
• Polishing a live site's appearance

Collect design tokens—reusable values for colors, typography, spacing, corners, and shadows—from source code, screenshots, or Figma exports. Organize them in a JSON file with source and usage references for later mapping to a design system.

• Collecting design values scattered across source files
• Preparing Figma design data for migration
• Extracting design settings from screenshots

Build polished web pages with explicit guidance for typography, spacing, colors, layered cards, and restrained animation. The skill provides layout options and mobile adaptation rules, producing React, Tailwind, or HTML code for a consistent visual direction.

• Creating a calm landing page with refined typography
• Designing an asymmetrical SaaS feature layout
• Building a portfolio with soft shadows and generous spacing

Inspect Figma screens to gather details for implementation, including component variants, spacing, shared design settings, and image assets. It helps an agent understand layouts and design libraries before turning a design into code.

• Gathering implementation details from a Figma screen
• Checking component variants and spacing
• Extracting image assets for implementation

Establish consistent typography, colors, spacing, and icons for interface design. Define design tokens, reusable values for visual styles, and apply guidance on contrast, responsive text, and dark mode to improve readability and visual consistency.

• Define design tokens for a new project
• Create typography and spacing guidelines
• Review color contrast and visual consistency

Guide slide edits with concrete rules for text size, spacing, alignment, and color contrast. Use it when replacing content or adjusting individual elements to keep pages readable and consistent with their existing design.

• Replace slide text without overflowing its box
• Improve contrast between text and its background
• Align cards and adjust spacing consistently

Build HTML/CSS pages styled after a named brand using 54 design references. Templates provide colors, typography, spacing, component styles, responsive behavior, and font substitutes to guide a consistent visual result.

• Create a landing page with Stripe-inspired styling
• Style a content site after Notion
• Build a dark dashboard inspired by Linear

Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.

The English summary is being prepared. Showing the original description.

Explain and configure individual spacing algorithms using student performance data and forgetting curves. Use when personalising retention schedules in adaptive learning platforms.

The English summary is being prepared. Showing the original description.

Explain and configure individual spacing algorithms using student performance data and forgetting curves. Use when personalising retention schedules in adaptive learning platforms.

The English summary is being prepared. Showing the original description.

Comprehensive UI design guidance based on Refactoring UI principles covering design personality, color theory, layout strategy, visual hierarchy, typography, spacing, mobile-first responsive design, and writing copy that doesn't read like AI wrote it. Use this skill whenever the user is creating new pages, building components, making design additions or changes, reviewing UI code, asking about design decisions (colors, fonts, spacing, layout), writing or editing interface copy, or discussing visual improvements. Trigger for any design-related conversation including "how should this look", "what color", "font size", "spacing", "layout", "responsive", "mobile", "this copy", "headline", "button text", "microcopy", or when reviewing/critiquing existing interfaces.

The English summary is being prepared. Showing the original description.

Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.

The English summary is being prepared. Showing the original description.

Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.

The English summary is being prepared. Showing the original description.

Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.

The English summary is being prepared. Showing the original description.

Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.

The English summary is being prepared. Showing the original description.

Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.

The English summary is being prepared. Showing the original description.

Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.

The English summary is being prepared. Showing the original description.

Refine interface appearance and interactions by reviewing spacing, typography, rounded corners, shadows, animation, and clickable areas. Get concrete before-and-after recommendations for buttons, cards, forms, and other components, including hover, focus, and loading states.

• Review screens that feel cramped or unfinished
• Refine buttons, cards, and forms
• Improve hover, focus, and loading states

Turn existing interface code into shared design rules for colors, type, and spacing, with documented decisions and an interactive preview. Audit visual consistency across ten areas and identify specific places to improve.

• Creating shared design rules from existing code
• Auditing visual consistency before a redesign
• Reviewing pull requests that change styling

Build HTML/CSS pages using visual specifications from 54 established websites, including Stripe, Linear, and Vercel. Templates provide colors, typography, spacing, component styles, and layouts that adapt to different screen sizes.

• Creating a landing page inspired by Stripe
• Designing a dashboard inspired by Linear
• Styling a documentation website

Define a new product's visual style through product discovery and research. Get recommendations for fonts, colors, layout, spacing, and motion, preview font and color combinations, and document the shared design rules in DESIGN.md.

• Defining the visual style for a new product
• Documenting shared brand and interface guidelines
• Previewing font and color combinations