跳到正文
cccskills

设计技能

UI/UX、标志、幻灯片、图像生成(7323 个)

按价格或排序方式筛选

Create a 16:9 product launch presentation with a dark cover and bright content slides. Introduce the problem, show the product, present three to six features and pricing tiers, then close with a clear call to action.

中文简介正在准备中。当前显示英语简介。

  • Preparing slides for a new product announcement
  • Explaining the problem behind a product
  • Presenting product features and pricing tiers
nexu-io/html-anything91982026年10月13日 更新

Create developer tutorial slides with a GitHub-style dark background, purple and blue lighting effects, and three-color gradient headings. Coordinate code colors, centered layouts, and highlighted blocks within a 16:9 presentation.

中文简介正在准备中。当前显示英语简介。

  • Preparing slides for a developer tutorial
  • Creating dark slides with code examples
  • Highlighting key points in technical explanations
nexu-io/html-anything91982026年10月13日 更新

Design a dark slide deck for AI products, knowledge graphs, or developer tool launches. Combine a graph-based cover, glowing blurred shapes, gradient section titles, highlighted code or command-line examples, and frosted-glass-style cards.

中文简介正在准备中。当前显示英语简介。

  • Prepare slides introducing an AI product
  • Present a knowledge graph project
  • Create a developer tool launch deck
nexu-io/html-anything91982026年10月13日 更新

Create a single HTML file with a flowing background and a prominent headline for video openings, landing page hero sections, or posters. Choose from four palettes and CSS, Canvas, or WebGL rendering approaches.

中文简介正在准备中。当前显示英语简介。

  • Create an opening frame for a video
  • Design a landing page hero section
  • Build a poster around a short message
nexu-io/html-anything91982026年10月13日 更新

Build a magazine-style presentation with a paper-and-ink look. Ten reusable layouts cover narratives, data, quotes, and comparisons, while five fixed palettes provide consistent styling in a single HTML file with keyboard navigation.

中文简介正在准备中。当前显示英语简介。

  • Sharing a viewpoint through a magazine-style presentation
  • Highlighting figures and quotes
  • Explaining steps or before-and-after comparisons
nexu-io/html-anything91982026年10月13日 更新

Create a macOS-style notification banner from an announcement or message, complete with an app icon, title, and body text. The single-file HTML design supports frosted-glass styling, light or dark appearances, and placement over video.

中文简介正在准备中。当前显示英语简介。

  • Creating a notification overlay for a video corner
  • Designing a product announcement banner
  • Presenting an announcement as a notification-style social image
nexu-io/html-anything91982026年10月13日 更新

Design three screens for a habit app inspired by role-playing games: a cover, daily quests with experience points, and quest details with subtasks and rewards. Present them in phone frames against a dark background.

中文简介正在准备中。当前显示英语简介。

  • Exploring a quest-based habit app design
  • Designing daily tasks with experience points and levels
  • Presenting three app screens together
nexu-io/html-anything91982026年10月13日 更新

Create terminal-style review slides for command-line tools, AI agents, and developer tools. Present execution traces, code differences, and performance comparisons using dark backgrounds, mint-green text, outlined bar charts, and amber, green, or red tags.

中文简介正在准备中。当前显示英语简介。

  • Create review slides for command-line and developer tools
  • Present AI agent execution traces and code differences
  • Show performance comparisons in a terminal-style deck
nexu-io/html-anything91982026年10月13日 更新

Create a minimal presentation built around large headlines, solid backgrounds, and arrow-prefixed lists. The template adapts the page count to the content and includes keyboard navigation hints and page numbers.

中文简介正在准备中。当前显示英语简介。

  • Presenting an idea with few visuals
  • Building a talk around bold headlines
  • Organizing key points into arrow-prefixed lists
nexu-io/html-anything91982026年10月13日 更新

Plan and generate hand-drawn article illustrations that turn key ideas, processes, and metaphors into clear visual scenes. The skill suggests image placement, creates individual 16:9 images with an active central character, and checks composition and annotations.

中文简介正在准备中。当前显示英语简介。

  • Plan illustration placement for an article
  • Illustrate a workflow or abstract idea
  • Generate hand-drawn images for blog posts
HarnessMD/munder-difflin89512026年10月21日 更新

stitch::code-to-design

Google 官方免费

Convert an existing frontend into a Stitch design by extracting a standalone HTML file and shared design rules, then uploading both to a project so you can revise the interface in Stitch.

中文简介正在准备中。当前显示英语简介。

  • Move an existing web app into Stitch
  • Review React or Vue component designs in Stitch
  • Extract design rules alongside screen HTML
google-labs-code/stitch-skills85382026年8月18日 更新

stitch::manage-design-system

Google 官方免费

Create and update shared design rules in Stitch, including colors, fonts, and corner shapes, then apply them to existing screens. Keep a DESIGN.md file and project metadata alongside the design system.

中文简介正在准备中。当前显示英语简介。

  • Apply shared design rules across existing screens
  • Turn a theme description into concrete design values
  • Create or update a design system in Stitch
google-labs-code/stitch-skills85382026年8月18日 更新

stitch::upload-to-stitch

Google 官方免费

Upload local images, HTML pages, and Markdown design documents to a Stitch project. The included Python script sends files directly over HTTP, avoiding the text output limits that can interrupt transfers through MCP tools.

中文简介正在准备中。当前显示英语简介。

  • Upload local mockup images to Stitch
  • Add extracted HTML pages to a Stitch project
  • Upload Markdown design documents
google-labs-code/stitch-skills85382026年8月18日 更新

design-md

Google 官方免费

Analyze existing Stitch screens and document their colors, typography, components, and layout in DESIGN.md. The resulting design reference combines plain visual descriptions with precise color values to guide requests for new screens.

中文简介正在准备中。当前显示英语简介。

  • Document design rules from an existing screen
  • Prepare a design reference for new screen prompts
  • Record color codes and their functional roles
google-labs-code/stitch-skills85382026年8月18日 更新

enhance-prompt

Google 官方免费

Turn a rough interface idea into a structured prompt for Stitch, with clear page sections, colors, and component details. When available, existing design rules are included to guide consistent screens or focused edits.

中文简介正在准备中。当前显示英语简介。

  • Turn a rough screen idea into a clear prompt
  • Revise a prompt that produced an unsuitable design
  • Include existing design rules in a screen request
google-labs-code/stitch-skills85382026年8月18日 更新

stitch::extract-design-md

Google 官方免费

Read frontend source code to document colors, typography, spacing, components, and layout rules in DESIGN.md. Use it to understand an existing interface or prepare design guidance for Stitch without building or running the app.

中文简介正在准备中。当前显示英语简介。

  • Document an existing app's design system
  • Review styling when the app cannot run
  • Prepare an existing visual identity for Stitch
google-labs-code/stitch-skills85382026年8月18日 更新

taste-design

Google 官方免费

Create a DESIGN.md guide for generating screens in Google Stitch. Define colors, typography, asymmetric layouts, component states, and motion with precise values and explicit restrictions, giving the agent consistent instructions for a specific visual style.

中文简介正在准备中。当前显示英语简介。

  • Set shared design rules for Google Stitch screens
  • Define asymmetric page layouts
  • Document typography, colors, and interaction behavior
google-labs-code/stitch-skills85382026年8月18日 更新

stitch::generate-design

Google 官方免费

Create and refine screen designs in Stitch from text descriptions or images. The skill clarifies layout requirements, edits existing screens, explores alternative designs, and saves HTML and screenshots for review.

中文简介正在准备中。当前显示英语简介。

  • Create a screen from a written brief
  • Turn a mockup image into a screen design
  • Refine specific parts of an existing screen
google-labs-code/stitch-skills85382026年8月18日 更新

Analyze webpage screenshots to extract colors, typography, and component styles. Generate structured JSON describing reusable design rules and an AI coding prompt, or convert the results into brand styling for a presentation video.

中文简介正在准备中。当前显示英语简介。

  • Extract design rules from a webpage screenshot
  • Prepare a coding prompt for a similar landing page
  • Export webpage styling for a presentation video
anbeime/skill84632026年10月20日 更新

Create pop-up book illustrations for educational, technology, and brand materials. The skill builds image prompts around layered paper textures, an open book, and warm colors, with optional digital effects, then checks the generated image against those visual requirements.

中文简介正在准备中。当前显示英语简介。

  • Illustrating technology products with paper textures
  • Showing learning paths as pop-up book scenes
  • Presenting a brand story or product
anbeime/skill84632026年10月20日 更新

archify

免费

Turn plain-language descriptions or Mermaid diagrams into interactive, standalone HTML diagrams of systems, workflows, API exchanges, data flows, and state changes. Validate layouts, explore relationships, switch themes, and export diagrams as images or video.

中文简介正在准备中。当前显示英语简介。

  • Explain system components and their relationships
  • Visualize workflows and approval steps
  • Map API calls and data pipelines
anbeime/skill84632026年10月20日 更新

Turn presentation content in JSON, a structured data format, into styled images and a browser slideshow. Choose a visual style, generate slide artwork, and optionally combine images and transition clips into a complete presentation video.

中文简介正在准备中。当前显示英语简介。

  • Creating styled artwork for presentation slides
  • Previewing presentations in a browser
  • Combining slide images and transitions into a video
anbeime/skill84632026年10月20日 更新

Turn image briefs into structured prompts for GPT-Image-2 using reusable JSON templates, organized fields for visual requirements. Specify composition, text, lighting, and constraints for product images, posters, infographics, and other design work.

中文简介正在准备中。当前显示英语简介。

  • Prepare prompts for product images
  • Specify poster titles and layouts
  • Structure infographic content
anbeime/skill84632026年10月20日 更新

Intended to generate icons in multiple sizes with a consistent visual style for apps, websites, and user interfaces. The supplied description outlines this purpose, but the skill file is a placeholder without operational instructions.

中文简介正在准备中。当前显示英语简介。

  • Prepare icons for an app
  • Create icons for a website
  • Plan a consistent icon set across multiple sizes
anbeime/skill84632026年10月20日 更新