'spacing' 검색 결과

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

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

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

• 기존 코드에서 디자인 규칙을 추출합니다
• 개편 전에 화면의 일관성을 점검합니다
• 스타일을 변경하는 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

새 제품의 목적과 경쟁 제품 조사를 바탕으로 색상, 글꼴, 여백, 동작 규칙을 제안합니다. 미리보기로 확인하고 DESIGN.md에 설계 방향을 정리합니다.

• 새 제품의 시각적 방향을 정할 때
• 브랜드와 화면의 공통 규칙 문서화
• 글꼴과 색상 조합 확인

기존 HTML에 조절 패널을 추가해 색상, 글자 크기, 여백, 테마와 움직임을 화면에서 바꿉니다. 설정을 저장하며 에이전트에 다시 요청하지 않고 외관을 시험합니다.

• 랜딩 페이지 색상과 여백 미세 조정
• 브랜드와 디자인 시스템 변형 시연
• 외관을 조절하는 독립형 데모 제작

따뜻한 무채색과 글자 대비, 넉넉한 여백으로 잡지처럼 정보를 정리하는 미니멀 웹 화면을 설계합니다. 카드 그리드와 은은한 강조색을 활용합니다.

• 미니멀 제품 화면의 프로토타입 제작
• 기능 소개 카드의 비대칭 그리드 배치
• 서체와 여백, 색상 통일

모호한 디자인 요청을 색상, 글꼴, 레이아웃 등 여덟 가지 관점으로 구체화합니다. 구현 기준이 될 명세서와 HTML 미리보기를 만들고 보완한 기본값도 명시합니다.

• 모호한 디자인 요청 구체화
• 랜딩 페이지 색상, 글꼴과 여백 설계
• HTML 미리보기로 외관 확인

Ant Design의 색상, 여백, 모서리, 글꼴을 공통 설정합니다. 개별 컴포넌트 조정과 다크 모드, CSS 변수 설정, 계산된 테마 값 추출도 지원합니다.

• 디자인에 맞춰 색상과 글꼴 조정
• 다크 테마 설정
• 특정 컴포넌트의 외관만 조정

웹사이트와 앱 화면을 설계하고 글자, 여백, 색상부터 조작 흐름까지 개선합니다. 사용성 검토, 화면 크기 대응, 표시 성능 확인도 다룹니다.

• 새 화면의 구성과 외관 설계
• 기존 화면의 글자·여백·색상 개선
• 접근성과 화면 크기 대응 점검

Review fixed pixel values in fonts, widths, and spacing, then suggest relative units that adapt to available space and browser font preferences. Check rendered layouts at different screen widths and during interactions before proposing changes.

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

• Adapting text to browser font size preferences
• Replacing fixed widths with flexible layouts
• Reviewing spacing units within components

Review CSS spacing, borders, and positioning for conversion to logical properties, which follow writing direction. Check rendered layouts across screen sizes and interaction states to support right-to-left languages and vertical text.

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

• Adapting layouts for Arabic or Hebrew
• Replacing fixed left and right spacing in CSS
• Reviewing layouts for vertical writing

Check whether sticky headers, banners, or chat widgets hide controls reached with the keyboard. Review tab order, zoomed views, and mobile layouts, then suggest spacing or scrolling changes that keep the focused control and its indicator visible.

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

• Checking keyboard navigation around sticky headers
• Testing pages with cookie banners and chat widgets open
• Reviewing overlap in zoomed and mobile layouts

Review and fix Flexbox layouts with overflowing text, uneven item widths, or inconsistent spacing. Check rendered results across screen sizes and interaction states, then adjust sizing rules, spacing, and text overflow settings.

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

• Fixing overflowing text in a horizontal layout
• Making items share available width equally
• Replacing margins between items with gap

Find repeated colors, spacing, and font sizes in CSS, then organize them into custom properties, reusable values referenced with var(). Review their use across components and screen sizes, and explain how overrides support theme changes.

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

• Consolidating repeated colors and spacing
• Preparing CSS for a brand refresh
• Reviewing values for dark mode

Build and revise a design system from brand materials or code. Organize colors, typography, spacing, components, and assets into structured files, with usage guidelines and previews, using the supported Design System artifact format.

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

• Organizing design rules from existing code and brand materials
• Documenting colors, typography, and spacing
• Collecting logos, icons, and component previews

Build web interfaces that adapt to screen and component widths. Use CSS Grid, flexible text and spacing, and container queries, which respond to a component’s available space, to adjust layouts, images, navigation, and tables.

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

• Building layouts that start with mobile screens
• Adapting components to their available width
• Scaling text and spacing with screen size

Build consistent interface foundations with design tokens, named values for colors, spacing, and typography. Covers light and dark themes, multiple brands, reusable components, and workflows that keep design definitions aligned with application code.

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

• Organizing shared colors, typography, and spacing
• Implementing light and dark theme switching
• Sharing interface components across multiple brands

Convert plain text documents into Markdown while preserving their content. Follow supplied formatting rules or a reference file, organize headings, lists, and code blocks, and clean up spacing for the chosen publishing platform.

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

• Converting text manuals into Markdown
• Matching formatting across related documents
• Cleaning up spacing in converted Markdown

Compare a UI screenshot with reference images and receive a structured JSON assessment. Get a score, pass or revision status, concrete visual differences, and suggested edits for layout, spacing, typography, colors, and visual hierarchy.

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

• Checking whether an implemented screen matches its reference
• Finding differences in spacing, typography, and colors
• Prioritizing edits from structured visual feedback

Build interfaces with Tailwind CSS v4 using CSS-based configuration, layouts that adapt to their container, and shared color and spacing values. The skill guides responsive styling, dark mode, and reusable component patterns.

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

• Moving Tailwind CSS v3 configuration to v4
• Making cards adapt to their parent container
• Standardizing colors, spacing, and typography

Create a consistent UI design system from brand colors. Generate design tokens, reusable values for colors, typography, and spacing, and support component documentation, responsive layout calculations, accessibility considerations, and clear handoff materials for developers.

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

• Generate shared design values from brand colors
• Standardize typography and spacing across screens
• Plan layouts for different screen widths

Create shared UI design values from a brand color, including palettes, typography, and spacing. Export them as CSS, SCSS, or JSON, document component behavior, plan layouts for different screens, and prepare developer handoff materials.

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

• Generate shared design values from a brand color
• Document component variants and states
• Plan typography and spacing for different screens

Build and review JetBrains plugin interfaces using Swing and IntelliJ Platform components. Follow concrete rules for layouts, theme colors, fonts, spacing, dialogs, and tool windows while keeping shared style values consistent.

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

• Building tool windows and settings screens
• Reviewing theme colors, fonts, and spacing
• Choosing components for dialogs and notifications

Format plain text or Markdown into a readable article with headings, emphasis, lists, and tables while preserving the original wording. Add titles and summaries, adjust spacing in mixed Japanese and English text, and save a formatted copy.

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

• Formatting a plain text draft as Markdown
• Improving an article's headings and emphasis
• Fixing spacing in mixed Japanese and English text