'typography' 검색 결과

Style materials with Anthropic's brand colors and typography. Apply distinct heading and body fonts, choose text colors for the background, and use coordinated accent colors for shapes, with fallback fonts when Poppins or Lora are unavailable.

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

• Styling slides with Anthropic's brand colors
• Applying consistent heading and body fonts
• Coordinating shape and accent colors

Build working web pages, application interfaces, and components with a clear visual direction. Shape typography, color, layout, and animation around the intended audience and purpose, producing coordinated design and code in HTML, CSS, JavaScript, React, or Vue.

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

• Building a landing page with a clear visual style
• Designing and implementing a dashboard
• Refining typography, colors, and spacing in an existing interface

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

Guide the colors, fonts, spacing, and charts used in websites, slides, PDFs, and reports. Includes format-specific typography rules, readability checks, and named color and font themes for documents and other non-web outputs.

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

• Unifying colors and fonts across slides
• Improving readability in PDFs and reports
• Choosing chart types and meaningful colors

Refine interface details such as rounded corners, shadows, typography, icon alignment, and animations. Use concrete implementation rules to improve visual consistency and interaction feedback, with changes documented in before-and-after tables.

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

• Refining the appearance of existing UI components
• Improving button and icon interaction feedback
• Reviewing entrance and exit animations

Turn completed research, analysis, reports, or plans from the current session into a self-contained HTML artifact. A renderer controls layout, typography, and color, using structured content and a choice of two visual styles.

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

• Turn research findings into an HTML artifact
• Format a cost analysis with tables and callouts
• Present investigation findings as a designed document

Design dashboards, admin panels, and app interfaces around users’ tasks and data. Establish screen layouts, colors, typography, and interaction states, then document reusable patterns to keep future interface work consistent.

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

• Designing dashboard information layouts
• Unifying admin panel colors and typography
• Defining settings page interaction states

Build working web pages, components, and application interfaces with a clear visual direction. The skill guides typography, color, spacing, motion, and responsive layouts that adapt to different screen sizes.

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

• Build a web page with a distinctive visual style
• Create reusable interface components
• Adapt an application interface for mobile screens

Review an interface across accessibility, layout, writing, typography, color, and visual polish. It coordinates specialist skills, combines evidence from code and rendered screens, and produces one report with findings ranked by their impact on users.

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

• Reviewing a screen or complete user flow
• Checking loading, error, and narrow-screen states
• Prioritizing interface fixes by user impact

Review a branch, pull request, or uncommitted changes for interface problems involving accessibility, layout, text, typography, and color. The report distinguishes newly introduced issues, regressions, and existing problems, including effects on screens that use changed components.

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

• Review interface changes in a pull request
• Check whether shared component changes affect other screens
• Find accessibility regressions before merging

Build web pages and interface components with a clear visual direction suited to their purpose and audience. The skill guides typography, color, layout, and animation, turning design choices into working frontend code.

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

• Building a landing page with a distinctive visual style
• Designing a dashboard with a consistent look
• Refining the typography, spacing, and colors of an existing web UI

Create sparse vertical posters from themes, articles, or photos, using paper textures, generous empty space, experimental typography, and one accent color. It also analyzes visual references and produces reusable style rules and image generation prompts.

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

• Turn an article into a poster with one visual metaphor
• Create a poster that preserves a photo's recognizable subject
• Extract reusable style rules from reference images

Plan and build frontend interfaces through guided questions, visual references, and agreed design choices. Define colors, typography, and layout before coding, then implement small sections for review, with optional Google Stitch prototyping.

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

• Clarifying a visual direction before building a page
• Designing dashboards from references and brand guidelines
• Reviewing improvements to an existing interface

Build consistent web interfaces with Tailwind CSS using small styling classes. Apply layout, typography, responsive behavior, interaction states, and dark mode patterns, with examples for buttons, page sections, and reusable components.

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

• Building responsive page layouts
• Standardizing buttons and shared components
• Adding dark mode styles

Design a two-panel page that gives visuals and supporting information distinct roles. This skill guides framing, spacing, typography, compact labels, and responsive stacking for product pages, portfolios, showcases, and technical presentations.

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

• Product pages pairing visuals with specifications
• Portfolios with separate artwork and commentary
• Concept presentations with a technical visual style

Transform an article, case study, or brand story into a connected scrolling page. Choose scroll-controlled video, a real-time Three.js scene, or HTML with charts and typography, then organize the narrative into five to seven clear stages.

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

• Turn a long article into a visual scrolling journey
• Present a product story through a connected 3D scene
• Explain report findings with scrolling charts and text

Create agency, studio, architecture, or portfolio websites using oversized typography, black-and-white sections, and documentary photography. Arrange project stories and irregular image collages alongside menus and FAQs designed for keyboard, touch, and reduced-motion use.

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

• Redesigning an agency or architecture studio website
• Presenting project processes through photo collages
• Organizing work and philosophy into contrasting sections

Design airy pages with a luminous blue sky background, drifting cloud light, and white typography. It guides minimal navigation, subtle framing, buttons, logo rows, and gentle motion to create a calm, spacious composition.

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

• Designing a sky-blue opening section
• Creating a spacious product introduction page
• Coordinating white type and subtle framing

Design a technical web interface with dark surfaces, bright green signals, precise borders, and a prominent WebGL visualization. Coordinate split layouts, typography, controls, status labels, and restrained animation into a consistent visual system.

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

• Design a split-screen hero with text and WebGL
• Unify progress indicators and status panels
• Integrate glowing particles or geometry into an interface

Turn rough screen ideas into clear prompts for generating user interfaces. Specify layout, typography, colors, spacing, and exact copy, then refine the results by changing one variable at a time to keep the design consistent.

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

• Turn a rough screen idea into a detailed generation prompt
• Keep landing page and onboarding designs visually consistent
• Compare variations in accent color or card arrangement

Analyze a reference video's layout, typography, motion, and interactions to create a detailed prompt for rebuilding or adapting the experience. Include asset requirements, implementation choices, mobile behavior, and alternatives for users who prefer reduced motion.

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

• Turn a reference video into a detailed build prompt
• Describe scroll effects and transitions precisely
• Plan image and video assets for a recreation

Build working web pages, application interfaces, and components with a clear visual direction. Shape typography, color, layout, and animation around the intended audience and purpose, producing coordinated design and code in HTML, CSS, JavaScript, React, or Vue.

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

• Building a landing page with a clear visual style
• Designing and implementing a dashboard
• Refining typography, colors, and spacing in an existing interface

Configure UnoCSS and style interfaces with utility classes, small reusable styling instructions. Use project settings to define custom rules, shortcuts, themes, and presets for features such as icons, typography, and attribute-based styling.

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

• Adding UnoCSS to a Vite or Nuxt project
• Combining repeated styles into shortcuts
• Defining shared colors and responsive breakpoints

Give bland interfaces more visual character through typography, color, layout, spacing, and motion. Shape a clear focal point around the brand and audience while checking readability, accessibility, performance, and ease of use.

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

• Giving a bland page more visual character
• Creating a stronger focal point for key content
• Reworking typography and color to fit a brand