'typography' 검색 결과

소스 코드, Figma 내보내기 데이터, 스크린샷에서 색상·글꼴·간격 등의 디자인 설정을 모아 출처와 사용 위치를 기록한 JSON으로 정리합니다.

• 코드에 흩어진 디자인 설정 정리
• Figma 디자인 이전 준비
• 스크린샷에서 디자인 설정 추출

회전하는 글자와 지구본, 서로 다른 속도로 움직이는 여러 레이어를 조합해 CSS로 움직이는 16:9 첫 화면을 제작하고 영상 내보내기용 HTML로 정리합니다.

• 마케팅 페이지의 움직이는 첫 화면 제작
• 글자가 움직이는 타이틀 카드 제작
• 원형 링과 지구본의 반복 재생 포스터 제작

연애·매칭 서비스나 커뮤니티의 수치를 주요 지표와 차트로 보여 주는 데스크톱 화면을 차분한 지면 스타일의 단일 HTML로 만듭니다.

• 연애 서비스 관리 화면을 시제품으로 만듭니다
• 커뮤니티 활동 현황을 보여 줍니다
• 상호 매칭 수와 매칭률 추이를 표시합니다

굵은 제목과 기하학적 카드를 활용해 스위스 스타일의 발표형 페이지를 단일 HTML 파일로 만듭니다. 슬라이드 이동, 테마와 강조색 전환, 주석 표시도 넣을 수 있습니다.

• 발표 형식의 소개 페이지 제작
• 스위스 스타일 HTML 슬라이드 제작
• 조작 가능한 제품 발표 페이지 제작

글자 배치, 여백, 색상, 카드 겹침, 절제된 움직임을 구체적인 규칙으로 정리하고, 정제되고 차분한 웹 페이지를 코드로 제작합니다.

• 글자 배치에 중점을 둔 랜딩 페이지 제작
• 비대칭 SaaS 기능 소개 페이지 제작
• 부드러운 그림자와 여백으로 작품 소개

사용자 조사의 배경, 참여자 구성, 행동 패턴과 근거를 세 장의 HTML 슬라이드로 정리합니다. 따뜻한 종이 색감의 스위스 스타일에 도표와 절제된 움직임을 더합니다.

• 사용자 조사를 세 장으로 보고합니다
• 참여자 구성을 도넛 차트로 표시합니다
• 행동 패턴과 근거를 나란히 설명합니다

글자 배치, 색상, 여백, 움직임의 구체적인 규칙에 따라 React나 Next.js 화면을 구현합니다. 정보 밀도와 레이아웃을 조정하고 정형화된 외형을 피합니다.

• 글자 배치가 돋보이는 홍보 페이지를 만듭니다
• 대시보드 표시와 조작감을 조정합니다
• 정보 밀도와 움직임의 강도를 조정합니다

웹사이트와 업무 화면을 용도에 맞게 디자인하고 작동하는 코드로 만듭니다. 글자 배치, 색상, 레이아웃과 함께 스마트폰 표시와 조작 상태도 다듬습니다.

• 시각적 방향이 명확한 랜딩 페이지 제작
• 일상 업무용 대시보드 설계
• 기존 UI의 외관과 조작 개선

원고를 따뜻한 양피지색 배경, 짙은 잉크 청색 강조와 통일된 세리프 서체의 HTML 문서로 정리합니다. 보고서와 편지, 이력서 등을 글자 위계와 여백으로 구성합니다.

• 핵심 내용을 한 장의 자료로 정리
• 표지와 목차가 있는 긴 보고서 제작
• 편지와 이력서의 서식 통일

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

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

주제에 맞는 구성과 글꼴을 골라 공개 웹페이지를 기획하고 구현·검토합니다. 실제 브라우저 측정과 세 가지 화면 너비의 스크린샷을 바탕으로 개선합니다.

• 틀에 박힌 랜딩 페이지 재설계
• 독자적인 구상을 담은 포트폴리오 제작
• 세 화면 너비에서 글자와 배치 점검

Build web pages and interface components with a clear visual direction and working code. Shape typography, colors, layouts, and animation around the intended audience and purpose, with support for HTML/CSS/JS, React, and Vue implementations.

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

• Build a landing page with a clear visual identity
• Refine a dashboard’s layout and typography
• Create React components with coordinated colors and motion

Style documents and other artifacts with Anthropic's brand colors and fonts. The skill specifies heading and body typography, readable text colors for different backgrounds, and accent colors for shapes, with fallback fonts when needed.

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

• Matching presentation colors to Anthropic's brand
• Applying consistent heading and body fonts
• Choosing text colors for light and dark backgrounds

Review and create print styles for web pages so printed content stays readable. Adjust typography and page breaks, hide navigation and ads, and display external link URLs in the printed output.

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

• Make web pages easier to read on paper
• Hide navigation and ads when printing
• Adjust print typography, page breaks, and link URLs

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

Review visual design choices before creating or styling web pages, components, apps, dashboards, or interactive reports. It flags repetitive colors, typography, layouts, and motion patterns to avoid, while keeping explicit user requests and other specified styles in control.

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

• Review design choices before creating a web page
• Check repetitive card layouts in a dashboard
• Review typography and color choices in components

Design distinctive web interfaces when no existing brand guidelines apply. The skill helps define a visual direction and carry it through typography, color, layout, backgrounds, and animation in HTML, with implementation detail matched to the chosen style.

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

• Designing a web page without existing brand guidelines
• Coordinating typography, color, and spacing
• Creating distinctive layouts and page animations

Plan and build interfaces with visual choices grounded in the product and its audience. Guides color, typography, layout, motion, and interface wording, with review steps to keep the result specific to the brief.

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

• Establish a visual direction for a new website
• Redesign an interface that feels generic
• Plan colors, typefaces, and layout before coding

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

Analyze a reference PowerPoint deck without changing it. Extract its structure, colors, typography, and layout patterns to inform a new presentation, and inspect the underlying package for broken links or malformed document data.

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

• Analyze colors, fonts, and layout patterns in a reference deck
• Build a catalog of reference slide layouts
• Run diagnostics across a folder of PowerPoint decks

Create a landing page from an interview about the product, audience, and brand preferences. Use Stitch to generate and refine designs, then package approved HTML with design documentation and a deployment checklist.

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

• Create a product landing page without a visual direction
• Turn brand preferences into colors and typography
• Compare page designs and refine them through feedback

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

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

Plan and build interfaces with visual choices grounded in the product and its audience. Guides color, typography, layout, motion, and interface wording, with review steps to keep the result specific to the brief.

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

• Establish a visual direction for a new website
• Redesign an interface that feels generic
• Plan colors, typefaces, and layout before coding