Design skills

Create a single-page editorial landing site from a brand brief, using paper textures, collage imagery, and structured content sections. The output includes responsive layouts, scroll animations, and sticky navigation, with generated, placeholder, or supplied images.

• Building an editorial landing page for a brand
• Presenting a studio's services and selected work
• Previewing a page with placeholder images

Build an HTML portfolio presentation for a senior designer interview, using three case studies to explain craft and design judgment. A fixed editorial layout with a neon yellow accent helps organize evidence for the hiring panel.

• Preparing a portfolio presentation for a senior designer interview
• Structuring three design case studies
• Explaining the reasoning behind design decisions

Build an HTML presentation explaining a music festival poster series, from its concept and visual system to adaptations across formats. Use a consistent graphic style with thick borders, offset shadows, and a pink, sage, and ink palette.

• Presenting a festival poster series to clients
• Explaining a brand's visual system and format adaptations
• Building graphic portfolio presentations

Turn notes and analysis into HTML slide decks for client recommendations, technical talks, or reports. Choose from themes and layouts, add speaker scripts and animations, and export slides as PNG images using the supplied rendering script.

• Turn analysis into a client recommendation deck
• Prepare a technical talk with speaker scripts
• Create slides for a product launch

Turn a Kyoto cherry-blossom trip into an HTML photo essay, from arrival to peak bloom and a memorable moment. A vintage Japanese cassette-package design gives the slides a consistent visual style for sharing with friends and travel readers.

• Sharing a cherry-blossom trip with friends
• Creating a photo essay for travel readers
• Presenting travel memories in a retro visual style

Prototype a single-screen kanban task board in HTML, with columns for work stages, task cards, assignee avatars, estimates, and filters. A sprint summary highlights progress, leading assignees, and blocked tasks for a team overview.

• Prototyping a team's sprint board
• Designing a task overview with assignees and estimates
• Exploring a board layout with filters and search

Create a paper-like one-page document for a white paper or studio introduction. The skill combines a warm parchment background, ink-blue accents, and language-specific serif fonts in a single HTML file, supporting English, Japanese, and Simplified Chinese.

• Create a studio introduction page
• Present a white paper as a single web page
• Build a Japanese one-pager with key metrics

Create an anniversary photo essay as an HTML slide deck, combining a couple’s memories and turning points. Use a coordinated black, pink, and cream design to tell a decade-long story for the couple, family, and friends.

• Creating a wedding anniversary photo essay
• Revisiting a decade of memories and turning points
• Sharing a couple’s story with family and friends

Build an HTML presentation for introducing a brand’s logo, colors, typography, and usage rules. A coordinated cream background, colorful accents, and fixed visual style support brand reviews and client presentations.

• Presenting an outdoor brand’s visual identity
• Preparing a creative agency pitch
• Reviewing brand concepts with a client

Create magazine-style HTML slide decks for editorial pitches, brand presentations, and art direction reviews. A coordinated three-color palette, contrasting typefaces, and reusable layouts keep the presentation visually consistent.

• Presenting a culture magazine relaunch
• Preparing a fashion brand presentation
• Reviewing an editorial design direction

Build a Notion-style HTML team dashboard showing key metrics, seven-day trends, recent activity, and tasks. Refresh data manually or automatically, with sample data available when no connector is connected.

• Reviewing team metrics and tasks in one place
• Building a dashboard connected to Notion
• Preparing an offline preview with sample data

Create an HTML presentation showing a photography studio's signature work, process, and pricing packages. A coordinated black and electric-yellow template helps prospective clients review the studio's work and consider a commission.

• Presenting a photography studio's portfolio
• Explaining packages and rates to prospective clients
• Preparing a creative agency pitch

Create HTML slide decks for humanities lectures and research presentations, organizing sources, arguments, and evidence. A coordinated navy and warm-yellow template gives the slides a calm, scholarly appearance.

• Preparing slides for a humanities lecture
• Presenting research in a graduate seminar
• Turning a research synthesis into a scholarly deck

Create an HTML presentation outlining digital transformation for an established insurer. Organize the diagnosis, sequence of initiatives, and operating rhythm for executive decisions, using a warm paper palette and a consistent, restrained editorial design.

• Presenting an insurer's digital transformation roadmap
• Explaining initiative priorities and implementation order
• Preparing an executive decision presentation

Create a 16:9 animated hero composition with rotating rings, a globe or other focal graphic, and expressive typography. Deliver a single HTML document with CSS animations that a frame-capture exporter such as HyperFrames can turn into video.

• Create an animated hero for a marketing page
• Design a title card with moving typography
• Build a looping poster with rotating rings and a globe

Build a single mobile app screen mockup in an iPhone 15 Pro frame. Choose from six layout types, apply the project's design settings, and produce HTML with device details such as the Dynamic Island and status icons.

• Mocking up a feed or message list
• Exploring a profile or product detail screen
• Presenting a checkout or welcome screen

Create an HTML defense deck for a field-study capstone, organizing survey methods, findings, contributions, and limitations for faculty reviewers. The template uses yellow paper, safety-pin illustrations, and handwritten-style text for a warm presentation.

• Prepare a field-study capstone defense
• Present qualitative research findings
• Organize a workshop debrief as slides

Create an HTML presentation for a graduation design project about transit hub wayfinding. Organize the brief, process, evidence, and outcome into a pastel sticky-note design that helps faculty and reviewers assess the contribution and limitations.

• Preparing a graduation project defense
• Explaining the process behind a wayfinding design
• Organizing project evidence and limitations

Turn research reports or internal reviews into a self-contained HTML slide deck. Paper-colored pages, ink-blue dividers, and serif typography organize findings and metrics, while keyboard, wheel, and touch navigation support presentation and browsing.

• Presenting study design, results, and limitations at a lab meeting
• Organizing a quarterly internal review
• Creating a Japanese research presentation

Create an HTML slide deck about neighborhood shops using portraits, local voices, and a handmade print style. Organize community stories in a coordinated beige-and-green layout that feels like a small independent magazine.

• Documenting disappearing neighborhood shops
• Sharing local portraits and voices
• Presenting a creator portfolio

Create a three-screen mobile onboarding prototype showing a welcome screen, app benefits, and sign-in options. The HTML page presents three phone frames side by side, with status bars, pagination dots, and primary action buttons.

• Designing a meditation app's welcome flow
• Reviewing how an app introduces its benefits
• Presenting a flow from welcome to sign-in

Create a single-page HTML poster with the feel of a newspaper essay. Oversized serif headlines, paper textures, six numbered sections, and annotated quotations organize substantial text into an editorial layout for opinions or launches.

• Presenting a launch announcement as an editorial poster
• Turning a manifesto into a single-page layout
• Designing a newspaper-style essay poster

Build a FlowAI-style team management dashboard with member tables, activity history, summary metrics, and charts. The result is a self-contained HTML prototype with working tabs, light and dark themes, panel zoom, chart tooltips, and CSV export.

• Prototyping a team management dashboard
• Presenting role distribution and online presence
• Reviewing member details and activity across tabs

Create a desktop admin or analytics dashboard prototype in one self-contained HTML file. Follow an existing design system to arrange navigation, key metric cards, charts, and a supporting table or chart.

• Prototyping a sales dashboard
• Exploring a traffic or usage analytics screen
• Designing an operations control panel