'spacing' 검색 결과

Improve interface layouts by reviewing spacing, alignment, content density, and visual hierarchy, the cues that show what matters most. Refine repetitive card grids and crowded sections into compositions with consistent spacing and responsive structure.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adjusting spacing in a crowded interface
• Making important content easier to spot
• Varying repetitive card-based layouts

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 無法直接讀取的場景。

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

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

색상·간격·글꼴을 공통 설정으로 정리하고 CSS 변수를 생성합니다. 화면 구성 요소의 상태별 규격과 코드의 직접 지정 값을 확인하며, 같은 브랜드 규칙으로 HTML 발표 자료를 만듭니다.

• 색상·간격·글꼴의 공통 기준 정리
• 버튼의 상태별 규격 정의
• 코드에 직접 지정한 스타일 값 확인

사이트의 시각적 불일치, 여백, 정보 강조, 느린 상호작용을 점검하고 소스 코드를 수정합니다. 수정마다 커밋을 만들고 전후 스크린샷으로 결과를 확인합니다.

• 사이트의 시각적 불일치를 찾을 때
• 여백과 정보의 강조 정도 조정
• 운영 중인 사이트의 외관 다듬기

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

Review a functionally complete interface before release and fix details in spacing, alignment, typography, wording, and interaction states. The skill also covers responsive layouts, accessibility, loading behavior, and code cleanup as part of the final quality pass.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Reviewing an interface before launch
• Fixing inconsistent spacing and typography
• Checking loading, error, and empty states

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

화면의 여백, 글자, 모서리 둥글기, 그림자와 움직임을 점검해 외관과 조작감을 다듬습니다. 버튼과 카드 등의 구체적인 개선안을 변경 전후로 제시합니다.

• 답답하거나 미완성처럼 보이는 화면 점검
• 버튼, 카드, 폼의 세부 마무리
• 호버 및 로딩 상태 개선

기존 코드에서 색상·글꼴·여백 등의 공통 규칙을 추출하고 디자인 명세와 미리보기를 만듭니다. 화면의 일관성을 열 가지 항목으로 평가하고 수정할 위치도 제시합니다.

• 기존 코드에서 디자인 규칙을 추출합니다
• 개편 전에 화면의 일관성을 점검합니다
• 스타일을 변경하는 PR을 검토합니다

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