디자인 스킬

Turn a theme into generative art, artwork created by computational rules, using p5.js. Receive a written artistic philosophy and an interactive HTML viewer with adjustable parameters, reproducible variations, and PNG download controls.

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

• Creating generative art from a theme
• Exploring particle and flow-based compositions
• Comparing reproducible variations using seeds

Design and implement web or iOS interfaces using the product’s existing components and design rules. Define required screen states and responsive behavior, consult optional visual references when useful, and inspect the rendered result when supported.

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

• Design screens that follow an existing product’s visual rules
• Define loading, empty, and error states
• Review responsive layouts before release

Build web interfaces with floating cards, spatial depth, and translucent glass effects using GSAP and 3D CSS. Add scroll animations while preserving keyboard navigation and providing static states for users who request reduced motion.

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

• Building a landing page with floating cards
• Adding depth to a dashboard
• Creating scroll-linked animations

Refine AI-generated web interfaces by improving colors, spacing, typography, and action priorities while preserving existing behavior. Uses four visual styles and a seven-part review to check usability, interaction feedback, accessibility, and mobile layouts.

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

• Polish an AI-generated prototype
• Simplify dashboard controls and repeated metrics
• Restyle a page using a reference screenshot

Create logo concepts from a brand name, industry, or reference image using Beatra’s paid service. The skill guides verified package installation, account authorization, cost approval, and review of the generated artwork.

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

• Exploring logo concepts for a new brand
• Generating logo ideas from an industry
• Creating logo concepts using an approved reference image

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

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

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

Design and implement native Android interfaces using Material Design 3 and Jetpack Compose, Android's UI toolkit. The skill covers layouts for different screen sizes, navigation, theming, accessibility, and state handling for reusable components.

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

• Build Android screens with Jetpack Compose
• Adapt layouts for phones, tablets, and foldables
• Set up dynamic colors and dark mode

Design and implement interface responses such as button feedback, loading indicators, page transitions, and swipe gestures. Use motion to communicate actions and state changes, with guidance on timing, performance, and support for people who prefer reduced animation.

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

• Adding hover and click feedback to buttons
• Showing loading placeholders and progress indicators
• Creating transitions for pages and interface components

Design and implement native iPhone and iPad interfaces with SwiftUI using Apple's design guidelines. Covers screen navigation, flexible layouts, system icons, accessibility, adjustable text sizes, and colors that adapt to light and dark modes.

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

• Designing iOS screens using Apple's guidelines
• Building layouts for both iPhone and iPad
• Implementing tabs and screen navigation

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

Design and implement interfaces around the intended audience and constraints. Plan visual hierarchy, spacing, and interface states, support different screen sizes and accessibility needs, then check the appearance against agreed acceptance criteria.

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

• Design an interface for a defined audience and constraints
• Implement layouts that adapt to different screen sizes
• Include accessibility in interface implementation

Create a new course page by copying an existing page and replacing its content while preserving the layout and styling. Check for leftover source text, then generate narration and verify that its audio matches the new subject.

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

• Create a new page using an existing layout
• Reuse a page from an imported slide deck
• Split lengthy content across matching pages

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 a new course using the visual design of an existing slide deck. Copy suitable layouts, replace their text and other content, check for leftover material and overflow, and generate narration while preserving the deck's colors, typography, and composition.

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

• Creating a course in an existing deck's visual style
• Reusing slide layouts for a different teaching topic
• Replacing content while preserving colors and typography

Create and improve web, mobile, and desktop interfaces in Penpot through connected tools. Reuse existing design patterns, build layouts and components, and inspect designs for readability, accessibility, spacing, and usability.

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

• Designing dashboards and app screens
• Improving forms and navigation
• Building a consistent component library

Create breadboard layout diagrams with HTML5 Canvas to show electronic components and wire connections. Use the skill for LED circuits, 555 timers, and 6502 computer projects, with component references, labels, and color-coded wiring.

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

• Plan component placement for an LED circuit
• Draw a breadboard layout for a 555 timer
• Visualize wiring for a 6502 computer

Design, implement, or review native Mac interfaces using SwiftUI or AppKit. Organize panes, remove unnecessary containers, and apply restrained Liquid Glass effects while checking resizing, interaction states, and accessibility, including designs supplied through Figma.

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

• Designing a native Mac app interface
• Reviewing screens with too many cards and borders
• Implementing a Figma design in SwiftUI

Turn descriptions of 3D shapes and CAD tasks into FreeCAD Python scripts. Create models with adjustable dimensions, automate repeated operations with macros, convert meshes and solids, or build custom dialogs and workbench tools.

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

• Create 3D models from written descriptions
• Build models with adjustable dimensions
• Automate repeated CAD operations with macros

Turn written descriptions of processes, systems, and ideas into editable Excalidraw diagrams. Create flowcharts, mind maps, relationship diagrams, and architecture diagrams, then receive an .excalidraw file to open and refine.

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

• Visualizing business procedures as flowcharts
• Explaining system components and connections
• Organizing brainstorming ideas into mind maps

Create diagrams as editable .drawio files and export them to PNG, SVG, or PDF with embedded diagram data for later editing. A bundled PNG export script uses the desktop app or a browser to render diagrams.

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

• Creating diagrams of services and external systems
• Preparing PNG diagrams for Word documents
• Sharing diagrams that can be edited again in draw.io

Design, refine, or review web and iOS interfaces using the product’s existing components and visual style. Consult relevant screen examples when useful, then inspect the result for layout problems, inaccessible controls, and broken interactions.

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

• Designing screens that fit an existing product
• Refining a dashboard or simplifying an interface
• Reviewing layouts and interactions before release

Create and fix Adobe Illustrator automation scripts using ExtendScript, Adobe’s JavaScript-based scripting language. Automate changes to artwork, text, layers, and artboards, process multiple files, and prepare exports such as PDF, SVG, and PNG.

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

• Automate repeated changes to artwork and text
• Export multiple Illustrator files
• Generate artwork variations from data