'layouts' 검색 결과

큰 글자와 여백, 빈칸 없는 카드 그리드, 스크롤에 연동되는 움직임을 조합해 데스크톱 랜딩 페이지를 시제품으로 만들고, 주목에서 행동으로 이어지는 구성을 설계합니다.

• 스크롤 효과가 있는 랜딩 페이지를 시제품으로 만듭니다
• 첫 화면의 배치와 글자 구성을 바꿉니다
• 빈칸 없는 카드 그리드를 설계합니다

랜딩 페이지와 제품 사이트의 디자인을 섹션별 가로 이미지로 만듭니다. 색상과 서체를 통일하며 구도와 여백, 버튼 표현을 달리해 구현 참고 자료로 제공합니다.

• 랜딩 페이지를 섹션별로 검토합니다
• 첫 섹션의 구도를 검토합니다
• 개발자에게 참고 이미지를 공유합니다

잡지 지면과 전자종이를 떠올리게 하는 가로형 슬라이드를 만듭니다. 열 가지 배치와 다섯 가지 색상 구성으로 주장과 데이터를 인쇄물 같은 모습으로 정리합니다.

• 잡지 스타일의 자료로 주장 전달
• 연구 결과와 주요 수치 공유
• 장별로 구성한 발표 자료 제작

제품 정보와 분석 결과를 16열 그리드와 하나의 강조색을 쓰는 HTML 슬라이드로 정리합니다. 22가지 고정 배치로 실제 데이터와 비교 내용을 전달합니다.

• 제품 로드맵 발표
• 핵심 지표와 순위 보고
• 개선 전후의 차이 설명

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

Design and improve website and app interfaces, from typography, spacing, and color to task flows. Review usability, accessibility, responsive layouts, and performance, or refine interface text, error states, and reusable design elements.

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

• Planning the structure and appearance of a new interface
• Improving typography, spacing, and color in existing screens
• Reviewing accessibility and layouts across screen sizes

Review mobile and tablet pages in portrait and landscape. Identify orientation locks, blocking rotation messages, and hidden controls, then suggest responsive layout changes so essential content and actions remain usable in both orientations.

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

• Checking mobile and tablet orientation support
• Reviewing forms after device rotation
• Inspecting dashboard and media layouts

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 styles written directly in HTML or embedded style blocks, and move suitable rules into external stylesheets. Check layouts across screen sizes and interaction states while preserving justified exceptions for critical styles and dynamic values.

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

• Reviewing styles written directly in HTML
• Moving embedded styles into external stylesheets
• Checking exceptions for critical CSS and dynamic values

Review and implement dark mode using CSS variables and the user's operating system preference. Check fixed colors, contrast, responsive layouts, and interaction states, with guidance for adding a manual theme switch that remembers the user's choice.

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

• Match site colors to the operating system's dark mode
• Find fixed colors that break the dark theme
• Add a manual theme switch that remembers the user's choice

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

Review CSS loading that delays a page’s first visible content. Help inline essential styles and defer other stylesheets, using preload and media conditions, while checking rendered layouts at different screen widths and interaction states.

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

• Investigating CSS that delays initial page display
• Separating essential styles from styles loaded later
• Reviewing preload and media-based stylesheet loading

Check whether production CSS is minified, meaning unnecessary spaces, comments, and verbose syntax are removed to reduce file size. Review build settings and rendered layouts, then suggest suitable minification tools or framework settings.

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

• Checking production CSS minification
• Adding minification to a build process
• Reviewing CSS output from PostCSS

Review and adapt component CSS using container queries, rules based on the space a parent element provides. This helps cards and other components adjust across sidebars, grids, and full-width layouts.

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

• Adapting a card for both grids and sidebars
• Converting media queries to container queries
• Reviewing layouts at different container widths

Review the loading order of CSS and JavaScript to address rendering delays and flashes of unstyled content. Suggest changes to the document head, script loading, and critical styles, while checking layouts across screen sizes and interaction states.

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

• Investigating flashes of unstyled content
• Reviewing CSS and JavaScript order in the document head
• Checking deferred scripts and critical styles

Apply shared visual and writing rules to course pages, figures, and manuals. Check colors, fonts, labels, layouts, plain technical English, dark themes, keyboard focus, touch targets, and reduced-motion behavior against defined reference values.

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

• Applying consistent colors and fonts to course pages
• Checking dark theme colors and text readability
• Standardizing figure labels and card layouts

Build reusable interface components with Tailwind CSS v4, using shared design values for colors, corners, and themes. Covers buttons, forms, responsive layouts, accessibility, and dark mode to help standardize interfaces across a project.

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

• Build a reusable UI component library
• Standardize colors and component styles
• Add responsive layouts and dark mode

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

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

Create, edit, and extract content from PowerPoint presentations and templates. Combine or split decks, work with speaker notes, and build slides with consistent themes, reusable layouts, and charts that remain editable in PowerPoint.

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

• Create a PowerPoint proposal or presentation
• Update slides using an existing template
• Extract slide text for summaries or other documents

Extend an existing Twenty app with data fields, layouts, custom screens, automated logic, workflows, and permissions. The skill guides code organization, entity creation, type checking, linting, and syncing definitions to the active remote.

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

• Add custom fields and objects to an existing Twenty app
• Build custom screens and standalone pages
• Run logic when records are created

Create and edit QGIS map projects from the terminal. Add geographic features and attributes, arrange maps and labels in print layouts, export PDFs or images, and run QGIS algorithms for processing geographic data.

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

• Creating a map project and adding points
• Adding geographic features and attributes
• Exporting labeled maps as PDFs or images

Create and review scientific figures with Matplotlib, Seaborn, or Plotly. The skill covers panel layouts, uncertainty, missing data, accessible color choices, and exported file checks, helping prepare figures for papers, presentations, or web publication.

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

• Create multi-panel figures for a paper
• Show uncertainty and missing observations clearly
• Review palette contrast and color-independent cues

Design and review laboratory automation with PyLabRobot, including equipment layouts and liquid transfers. Check planned volumes and tip capacities, draft protocols, and simulate operations in software before a trained operator reviews any physical run.

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

• Reviewing liquid-transfer plans
• Checking labware layouts and capacities
• Simulating protocols without physical equipment