default

📁 lovable/dev 📅 Jan 27, 2026
2
总安装量
2
周安装量
#36500
全站排名
安装命令
npx skills add https://docs.lovable.dev

Agent 安装分布

mcpjam 2
antigravity 2
windsurf 2
zencoder 2
cline 2

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

  1. Plan the application: Define what to build, target users, key actions, and design direction
  2. Create project: Enter initial prompt describing the application
  3. Add backend: Enable Lovable Cloud or connect Supabase
  4. Create database: Describe data structure; Lovable generates schema
  5. Add authentication: Prompt for login/signup; configure in Cloud or Supabase
  6. Build features: Use Agent Mode to implement features, Plan Mode to explore approaches
  7. Test and iterate: Use version history to revert changes, bookmark important versions
  8. Deploy: Publish to live URL, configure custom domain if needed
  9. Monitor: Check logs and analytics in Cloud tab

Integrate External API

  1. Identify API requirements: Endpoint URLs, authentication method, request/response format
  2. Enable Lovable Cloud: Required for authenticated APIs
  3. Prompt for integration: “Integrate [API name] with [specific endpoints and auth details]”
  4. Add secrets: Go to Cloud → Secrets, add API key or credentials
  5. Lovable creates Edge Function: Automatically protects credentials
  6. Test integration: Verify API calls work in preview
  7. Deploy: Publish application with integrated API

Collaborate on Project

  1. Invite collaborators: Click Invite in project editor, add email addresses
  2. Assign roles: Set permissions (Viewer, Editor, Admin, Owner)
  3. Work together: Real-time collaboration with live updates
  4. Manage versions: Use version history to track changes
  5. Publish together: Editors and above can publish (Enterprise can restrict)
  6. Track usage: Admins can view credit usage per collaborator

Create App from Design

  1. Prepare design: Screenshot from Figma, Excalidraw, or existing website
  2. Create project: Paste or drag-drop image into Lovable
  3. Lovable converts: Transforms design into functional code
  4. Refine: Use prompts to adjust layout, colors, functionality
  5. Add backend: Connect database and authentication
  6. Deploy: Publish to live URL

Share App via URL

  1. Create prompt: Write clear description of app to build
  2. Prepare images: Gather up to 10 reference images (optional)
  3. Generate URL: Use Lovable Link Generator or construct manually
  4. Share link: Send URL to others
  5. Auto-build: Clicking link opens Lovable and starts building
  6. Authenticate: New users sign up/login, select workspace
  7. 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