default
npx skills add https://docs.lovable.dev
Agent 安装分布
Skill 文档
Capabilities
Lovable enables agents to build complete web applications from natural language descriptions. Agents can create frontend interfaces, backend logic, databases, authentication systems, and deploy live applications without writing code manually. The platform supports the full development lifecycle from prototyping through production deployment, with built-in collaboration, version control, and enterprise security features.
Skills
Application Development
Create applications from prompts
- Describe what to build in natural language and Lovable generates a working application
- Supports full-stack development: frontend UI, backend logic, database, authentication
- Example: “Create a dashboard with user login, monthly sales in a line chart, and customer demographics in a pie chart”
Build with Agent Mode
- Autonomous execution mode for complex development tasks
- Lovable interprets requests, explores codebase, reads/modifies files, debugs issues proactively
- Can add, update, or refactor code across multiple files
- Inspects logs and network activity to identify and fix errors
- Usage-based pricing model
Plan with Plan Mode
- Reasoning and planning mode for exploration before implementation
- Ask questions, debug issues, compare approaches, design architecture
- Creates formal implementation plans that can be edited and refined
- Never modifies code until plan is approved
- Each message costs 1 credit
Visual Design and Editing
- Design view with Themes and Visual edits tabs
- Apply built-in themes or create custom themes from CSS files
- Multi-select elements for batch edits using keyboard shortcuts
- Edit text, colors, fonts, layout, margins, and padding visually
- Generate AI images by editing images with prompts
- No credits required for visual customization (except dynamic elements)
Code Mode
- View and manually edit raw project source code directly in editor
- Available on paid plans
- Allows direct code inspection and modification
Backend and Data
Lovable Cloud Integration
- Built-in full-stack hosting with automatic scaling
- Database: Generate schemas automatically from descriptions, manage records via UI
- Users & Auth: Built-in authentication with email, phone, Google sign-in
- Storage: Upload and manage files up to 2GB, serve via secure URLs
- Edge Functions: Serverless functions for custom logic, AI features, payments, scheduled tasks
- Secrets: Secure storage for API keys and credentials
- Logs: Real-time monitoring and debugging
- Instance management: Upgrade instance size for higher traffic
- Test and Live environments (Beta): Separate development and production data
- Usage-based pricing: $25/month free Cloud usage per workspace
Supabase Integration
- Connect PostgreSQL database with authentication, storage, real-time updates
- Create tables via SQL or natural language descriptions
- User authentication: Email/password, social logins (Google, GitHub, etc.)
- File storage: Upload and serve images, documents, media
- Real-time subscriptions: Listen for database changes and update UI instantly
- Edge Functions: Deploy serverless functions for backend logic
- Row Level Security (RLS): Define access policies per row
- Secrets management: Store API keys securely for use in functions
API Integration
- Integrate any external API (authenticated or public)
- For unauthenticated APIs: Direct calls from app
- For authenticated APIs: Lovable creates Edge Functions to protect credentials
- Automatically detects authentication method and creates secure integration
- Example: “Integrate the OpenWeatherMap API with GET /weather?q={city}&units=metric&appid={API_KEY}”
Integrations and Connectors
Shared Connectors (configured once, available workspace-wide)
- Lovable Cloud: Full-stack hosting and backend
- Lovable AI: AI-powered features with multiple model options
- ElevenLabs: Text-to-speech and audio generation
- Firecrawl: Website scraping and content extraction
- Perplexity: Web-backed research and question answering
- Shopify: E-commerce operations
- Stripe: Payment processing and subscriptions
- Supabase: PostgreSQL database backend
Personal Connectors (MCP Servers)
- Connect personal tool accounts for context during building
- Linear: Import issues and specs
- Notion: Reference docs and pages
- Miro: Access boards and diagrams
- Jira/Confluence: Align with tickets and documentation
- n8n: Mirror automation workflows
- Custom MCP servers: Connect internal or third-party systems
Build with URL API
- Create applications via shareable URLs with prompts and images
- Base URL:
https://lovable.dev/?autosubmit=true#prompt=YOUR_PROMPT_HERE - Parameters:
prompt(required, max 50k chars),images(optional, max 10 URLs) - Use Lovable Link Generator to create properly formatted URLs
- Supports JPEG, PNG, WebP image formats
- Automatically handles authentication flow for logged-in and new users
AI Capabilities
Lovable AI Features
- Default model: Gemini 3 Flash
- Supported models: Gemini 3 Pro, Gemini 2.5 series, GPT-5 series, Nano Banana Pro
- AI summaries: Condense long text into clear takeaways
- AI chatbot/agent: Build conversational helpers
- Sentiment detection: Understand user feedback
- Document Q&A: Answer questions against content
- Creative generation: Brainstorming and copy drafting
- Multilingual translation: Serve global users
- Image and document analysis: Extract and interpret information
- Workflow automation: Handle repetitive tasks
- Usage-based pricing: $1/month free AI usage per workspace
- Specify model choice directly in prompts
Deployment and Publishing
Publish Applications
- Deploy to live URL at
[published-url].lovable.app - Configure site metadata: favicon, title, description, social sharing image
- Free/Pro plans: Public access (anyone with link)
- Business/Enterprise plans: Control access (anyone or workspace members only)
- Update published apps anytime without republishing
- Unpublish projects to remove from web
Custom Domains
- Add custom domain using Entri, Netlify, Vercel, or Namecheap
- Available on paid plans
- Maintain brand identity with custom URLs
Security Review
- Built-in security checks before publishing
- Identify potential vulnerabilities
- Guidance on security best practices
Collaboration and Project Management
Workspace Collaboration
- Invite teammates to workspace or specific projects
- Workspace roles: Viewer, Editor, Admin, Owner
- Project roles: Viewer, Editor, Admin, Owner
- Real-time collaboration: See changes as they happen
- Workspace-level permissions for publishing, billing, integrations
- Unlimited members on all plans
Project Management
- Create projects from prompts, remixes, Figma designs, sketches, or website screenshots
- Version history: Track all changes, revert to previous versions
- Bookmark important edits for easy reference
- Edit past messages and explore different approaches
- Custom knowledge: Add project guidelines, personas, design assets, coding conventions
- Project visibility: Private (workspace only) or public (remixable)
- Transfer projects between workspaces
- Remix existing projects as starting points
GitHub Integration
- Sync code to GitHub repository
- Make changes in GitHub or IDE while keeping Lovable in sync
- Maintain code ownership and integrate with existing workflows
- Manage GitHub connection from project settings
Design and Customization
Design Systems
- Apply design templates and themes
- Create custom themes from CSS files
- Share themes across workspace
- Maintain consistent branding
Visual Edits
- Select and edit elements directly on page
- Update text, colors, fonts without code
- Adjust layout, margins, padding
- Replace images via upload or URL
- Generate AI images with prompts
- Multi-select for batch edits
Custom Knowledge
- Document project guidelines and constraints
- Define user personas and target audience
- Store design assets and color palettes
- Record coding conventions and security practices
- Link to external references and documentation
- Applied across all project edits
Workflows
Build a Full-Stack Application
- Plan the application: Define what to build, target users, key actions, and design direction
- Create project: Enter initial prompt describing the application
- Add backend: Enable Lovable Cloud or connect Supabase
- Create database: Describe data structure; Lovable generates schema
- Add authentication: Prompt for login/signup; configure in Cloud or Supabase
- Build features: Use Agent Mode to implement features, Plan Mode to explore approaches
- Test and iterate: Use version history to revert changes, bookmark important versions
- Deploy: Publish to live URL, configure custom domain if needed
- Monitor: Check logs and analytics in Cloud tab
Integrate External API
- Identify API requirements: Endpoint URLs, authentication method, request/response format
- Enable Lovable Cloud: Required for authenticated APIs
- Prompt for integration: “Integrate [API name] with [specific endpoints and auth details]”
- Add secrets: Go to Cloud â Secrets, add API key or credentials
- Lovable creates Edge Function: Automatically protects credentials
- Test integration: Verify API calls work in preview
- Deploy: Publish application with integrated API
Collaborate on Project
- Invite collaborators: Click Invite in project editor, add email addresses
- Assign roles: Set permissions (Viewer, Editor, Admin, Owner)
- Work together: Real-time collaboration with live updates
- Manage versions: Use version history to track changes
- Publish together: Editors and above can publish (Enterprise can restrict)
- Track usage: Admins can view credit usage per collaborator
Create App from Design
- Prepare design: Screenshot from Figma, Excalidraw, or existing website
- Create project: Paste or drag-drop image into Lovable
- Lovable converts: Transforms design into functional code
- Refine: Use prompts to adjust layout, colors, functionality
- Add backend: Connect database and authentication
- Deploy: Publish to live URL
Share App via URL
- Create prompt: Write clear description of app to build
- Prepare images: Gather up to 10 reference images (optional)
- Generate URL: Use Lovable Link Generator or construct manually
- Share link: Send URL to others
- Auto-build: Clicking link opens Lovable and starts building
- Authenticate: New users sign up/login, select workspace
- Build starts: App creation begins automatically with prompt and images
Integration
Lovable integrates with:
- GitHub: Sync code, maintain version control, integrate with existing workflows
- Supabase: PostgreSQL database, authentication, storage, real-time updates, Edge Functions
- Lovable Cloud: Built-in backend with database, auth, storage, Edge Functions
- Stripe: Payment processing and subscription management
- Shopify: E-commerce operations and product management
- ElevenLabs: Text-to-speech and audio generation
- Firecrawl: Website scraping and content extraction
- Perplexity: Web-backed research and AI-powered answers
- MCP Servers: Linear, Notion, Miro, Jira, Confluence, n8n, custom servers
- Any API: Custom or third-party APIs with automatic credential protection
- Email services: Resend for email capabilities
- Design tools: Figma, Excalidraw for design-to-code conversion
Context
Development Modes
- Agent Mode: Autonomous execution, complex tasks, code modifications (usage-based pricing)
- Plan Mode: Reasoning and planning before implementation (1 credit per message)
- Code Mode: Direct code editing in editor (paid plans only)
Pricing Model
- Workspace credits: Used for messaging while building (subscription-based)
- Cloud usage: Separate usage-based pricing for deployed apps ($25/month free)
- AI usage: Separate usage-based pricing for AI features ($1/month free)
- Free plan includes $25 Cloud + $1 AI per month
Security and Compliance
- SOC 2 Type II certified
- ISO 27001:2022 certified
- GDPR compliant
- Two-factor authentication (2FA)
- Single sign-on (SSO) for Business/Enterprise
- SCIM user provisioning for Enterprise
- Row Level Security (RLS) for database access control
- Secrets management for secure credential storage
Best Practices
- Plan before prompting: Define goals, users, key actions, design direction
- Build by component: Create modular sections rather than full pages
- Use real content: Avoid placeholder text; use actual copy
- Speak atomic: Use specific UI terms (buttons, cards, modals, forms)
- Use design buzzwords: Minimal, expressive, cinematic, playful, premium
- Layer context: Use Custom Knowledge to guide all edits
- Version intentionally: Make meaningful changes one at a time
- Review security: Always perform security review before publishing
- Test thoroughly: Use Test environment before publishing to Live
For additional documentation and navigation, see: https://docs.lovable.dev/llms.txt