playbooks

home / skills / partme-ai / full-stack-skills / sketch

sketch skill

/skills/sketch

This skill helps you design in Sketch by guiding artboards, symbols, styles, and prototyping workflows.

npx playbooks add skill partme-ai/full-stack-skills --skill sketch

Review the files below or copy the command above to add this skill to your agents.

Files (2)
SKILL.md
647 B
---
name: sketch
description: Provides comprehensive guidance for Sketch design tool including artboards, symbols, styles, and prototyping. Use when the user asks about Sketch, needs to create designs in Sketch, work with Sketch symbols, or export designs from Sketch.
license: Complete terms in LICENSE.txt
---

## When to use this skill

Use this skill whenever the user wants to:
- [待完善：根据具体工具添加使用场景]

## How to use this skill

[待完善：根据具体工具添加使用指南]

## Best Practices

[待完善：根据具体工具添加最佳实践]

## Keywords

[待完善：根据具体工具添加关键词]

Overview

This skill provides practical, hands-on guidance for working with Sketch, covering artboards, symbols, text and layer styles, components, and prototyping. It helps designers create consistent UI systems, build reusable assets, and prepare files for handoff or export. Use it when you need step-by-step help, troubleshooting, or workflow improvements in Sketch.

How this skill works

The skill inspects common Sketch workflows and offers concise instructions, naming conventions, and setup patterns for artboards, symbols, styles, and responsive layouts. It explains how to build and maintain symbol libraries, link overrides, manage nested components, and create interactive prototypes. It also covers export settings and tips for handing off assets to developers.

When to use it

  • Creating or organizing artboards and responsive layouts
  • Designing reusable symbols/components and style systems
  • Setting up text, color, and layer styles for consistency
  • Building interactive prototypes and transitions
  • Preparing assets and slices for export and developer handoff

Best practices

  • Keep artboards organized with consistent naming and size grids to reflect breakpoints
  • Create a master symbol library for common UI elements and avoid duplicating styles
  • Use text and color styles for typographic and color consistency across screens
  • Prefer nested symbols/components to manage complex UI variations and use overrides sparingly
  • Prototype with fixed-position elements and flows, then test interactions on-device before finalizing
  • Use export presets and slices, and provide 1x/2x/3x assets and SVG where appropriate for developers

Example use cases

  • Set up a design system: create master symbols, define color and text styles, and document usage
  • Build an app prototype: design screens, link symbols for navigation, and add interaction hotspots
  • Convert a Figma or PSD mock into Sketch: recreate styles, rebuild components, and standardize naming
  • Prepare assets for developers: export icons and images with correct scales and include CSS/measurements from Sketch Inspect
  • Troubleshoot symbol overrides: resolve unexpected overrides and refactor nested components for easier maintenance

FAQ

Can I share a Sketch library across a team?

Yes. Publish a Sketch Library file and have teammates add it in Preferences → Libraries. Keep the library versioned and update symbols centrally.

How do I export icons for multiple resolutions?

Use export presets on layers or groups and select scales such as 1x, 2x, 3x. Export SVG for vector assets and PNG for raster at required sizes.