一键在 Manus 中运行任何 Skill

aipixelperfect-design-generator

星标1

分支0

更新时间2026年6月30日 22:27

AI-powered image generation platform for professional design creation with prompt-based synthesis and real-time collaboration

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

Aradotso

Aradotso/design-skills

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

AiPixelPerfect Design Generator

Skill by ara.so — Design Skills collection.

AiPixelPerfect is an AI-powered design synthesis engine that generates professional-quality images from text prompts. It features a responsive web interface, multilingual support, real-time collaboration tools, and export integrations with popular design platforms like Figma, Adobe Creative Cloud, and Canva.

Installation

Web Interface Access

Navigate to the hosted platform:

# Open the web interface
open https://abnormal-codex.github.io/Ai-Pixel-Design-Archive/

Create an account and authenticate via the UI

Local Development Setup

# Clone the repository
git clone https://github.com/abnormal-codex/Ai-Pixel-Design-Archive.git
cd Ai-Pixel-Design-Archive

# Install dependencies (Next.js based)
npm install

# Set up environment variables
cp .env.example .env.local
# Edit .env.local with your configuration

Environment Configuration

# .env.local
NEXT_PUBLIC_API_ENDPOINT=https://api.aipixelperfect.com
NEURAL_BACKEND_URL=https://synthesis.aipixelperfect.com
WEBSOCKET_SERVER=wss://collab.aipixelperfect.com
API_KEY=${AIPIXELPERFECT_API_KEY}
MAX_RESOLUTION=8192
DEFAULT_VARIATIONS=4

Core Concepts

Design Synthesis Workflow

Prompt Input → Descriptive text of desired image
Synthesis → Neural engine generates 4 variations
Selection → Choose best matching variation
Refinement → Adjust parameters with sliders
Export → Download or push to design tools

Supported Output Formats

Raster images: PNG, JPEG, WebP
Resolutions: 512px to 8K (8192px)
Color spaces: sRGB, Display P3
Transparency: Alpha channel support

Web Interface Usage

Basic HTML Integration

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AiPixelPerfect Design Generator</title>
    <link rel="stylesheet" href="styles/aipixel.css">
</head>
<body>
    <div id="synthesis-canvas">
        <div class="prompt-container">
            <textarea 
                id="design-prompt" 
                placeholder="Describe your design vision..."
                rows="3"
            ></textarea>
            <button id="synthesize-btn" onclick="generateDesign()">
                Synthesize
            </button>
        </div>
        
        <div id="variations-grid" class="hidden">
            <!-- Generated variations appear here -->
        </div>
        
        <div id="refinement-panel" class="hidden">
            <label>Brightness: 
                <input type="range" id="brightness" min="0" max="200" value="100">
            </label>
            <label>Contrast: 
                <input type="range" id="contrast" min="0" max="200" value="100">
            </label>
            <label>Saturation: 
                <input type="range" id="saturation" min="0" max="200" value="100">
            </label>
            <label>Style Weight: 
                <input type="range" id="style-weight" min="0" max="100" value="50">
            </label>
            <button onclick="applyRefinements()">Apply Changes</button>
        </div>
    </div>
    
    <script src="scripts/aipixel-core.js"></script>
</body>
</html>

JavaScript Core Functions

// scripts/aipixel-core.js

const AiPixelPerfect = {
    apiEndpoint: process.env.NEXT_PUBLIC_API_ENDPOINT,
    currentDesign: null,
    
    // Generate design from prompt
    async generateDesign(prompt, options = {}) {
        const response = await fetch(`${this.apiEndpoint}/synthesize`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${process.env.API_KEY}`
            },
            body: JSON.stringify({
                prompt: prompt,
                variations: options.variations || 4,
                resolution: options.resolution || 2048,
                style_weight: options.styleWeight || 0.5,
                language: options.language || 'en'
            })
        });
        
        if (!response.ok) {
            throw new Error(`Synthesis failed: ${response.statusText}`);
        }
        
        const data = await response.json();
        return data.variations;
    },
    
    // Refine selected design
    async refineDesign(designId, adjustments) {
        const response = await fetch(`${this.apiEndpoint}/refine/${designId}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${process.env.API_KEY}`
            },
            body: JSON.stringify({
                brightness: adjustments.brightness,
                contrast: adjustments.contrast,
                saturation: adjustments.saturation,
                style_weight: adjustments.styleWeight
            })
        });
        
        return await response.json();
    },
    
    // Export to external platform
    async exportDesign(designId, platform, options = {}) {
        const response = await fetch(`${this.apiEndpoint}/export/${designId}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${process.env.API_KEY}`
            },
            body: JSON.stringify({
                platform: platform, // 'figma', 'adobe', 'canva'
                format: options.format || 'png',
                maintain_layers: options.maintainLayers || false,
                target_project: options.targetProject || null
            })
        });
        
        return await response.json();
    }
};

// Example usage in UI
async function generateDesign() {
    const prompt = document.getElementById('design-prompt').value;
    const variationsGrid = document.getElementById('variations-grid');
    
    try {
        const variations = await AiPixelPerfect.generateDesign(prompt, {
            variations: 4,
            resolution: 2048
        });
        
        variationsGrid.innerHTML = '';
        variations.forEach((variation, index) => {
            const img = document.createElement('img');
            img.src = variation.url;
            img.alt = `Variation ${index + 1}`;
            img.onclick = () => selectVariation(variation.id);
            variationsGrid.appendChild(img);
        });
        
        variationsGrid.classList.remove('hidden');
    } catch (error) {
        console.error('Generation failed:', error);
        alert('Failed to generate design. Please try again.');
    }
}

function selectVariation(variationId) {
    AiPixelPerfect.currentDesign = variationId;
    document.getElementById('refinement-panel').classList.remove('hidden');
}

async function applyRefinements() {
    const adjustments = {
        brightness: document.getElementById('brightness').value / 100,
        contrast: document.getElementById('contrast').value / 100,
        saturation: document.getElementById('saturation').value / 100,
        styleWeight: document.getElementById('style-weight').value / 100
    };
    
    const refined = await AiPixelPerfect.refineDesign(
        AiPixelPerfect.currentDesign,
        adjustments
    );
    
    // Update preview with refined image
    console.log('Refined design:', refined.url);
}

API Integration

RESTful API Client

// api/aipixel-client.js

class AiPixelPerfectClient {
    constructor(apiKey, baseUrl = 'https://api.aipixelperfect.com') {
        this.apiKey = apiKey;
        this.baseUrl = baseUrl;
    }
    
    async request(endpoint, method = 'GET', body = null) {
        const options = {
            method,
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${this.apiKey}`
            }
        };
        
        if (body) {
            options.body = JSON.stringify(body);
        }
        
        const response = await fetch(`${this.baseUrl}${endpoint}`, options);
        
        if (!response.ok) {
            const error = await response.json();
            throw new Error(error.message || 'API request failed');
        }
        
        return await response.json();
    }
    
    // Generate designs from prompt
    async synthesize(prompt, options = {}) {
        return await this.request('/synthesize', 'POST', {
            prompt,
            variations: options.variations || 4,
            resolution: options.resolution || 2048,
            style_weight: options.styleWeight || 0.5,
            language: options.language || 'en',
            seed: options.seed || null
        });
    }
    
    // Get design status
    async getDesignStatus(designId) {
        return await this.request(`/designs/${designId}`);
    }
    
    // Download design
    async downloadDesign(designId, format = 'png') {
        const response = await fetch(
            `${this.baseUrl}/designs/${designId}/download?format=${format}`,
            {
                headers: {
                    'Authorization': `Bearer ${this.apiKey}`
                }
            }
        );
        
        return await response.blob();
    }
    
    // Create custom style
    async createStyle(name, referenceImages, options = {}) {
        const formData = new FormData();
        formData.append('name', name);
        formData.append('description', options.description || '');
        
        referenceImages.forEach((image, index) => {
            formData.append(`reference_${index}`, image);
        });
        
        const response = await fetch(`${this.baseUrl}/styles`, {
            method: 'POST',
            headers: {
                'Authorization': `Bearer ${this.apiKey}`
            },
            body: formData
        });
        
        return await response.json();
    }
    
    // List available styles
    async listStyles() {
        return await this.request('/styles');
    }
}

// Usage example
const client = new AiPixelPerfectClient(process.env.AIPIXELPERFECT_API_KEY);

async function generateAndExport() {
    const result = await client.synthesize(
        'minimalist logo for tech startup, blue and white color scheme',
        {
            variations: 4,
            resolution: 4096,
            styleWeight: 0.7
        }
    );
    
    console.log('Generated designs:', result.variations);
    
    // Download the first variation
    const blob = await client.downloadDesign(result.variations[0].id, 'png');
    const url = URL.createObjectURL(blob);
    console.log('Download URL:', url);
}

Collaboration Features

Real-Time Annotation System

// collaboration/annotations.js

class DesignAnnotation {
    constructor(websocketUrl, designId) {
        this.ws = new WebSocket(websocketUrl);
        this.designId = designId;
        this.annotations = [];
        
        this.ws.onmessage = (event) => {
            const data = JSON.parse(event.data);
            this.handleAnnotation(data);
        };
    }
    
    // Add annotation to design
    addAnnotation(x, y, radius, comment, type = 'circle') {
        const annotation = {
            design_id: this.designId,
            type: type,
            position: { x, y },
            radius: radius,
            comment: comment,
            timestamp: Date.now(),
            author: process.env.USER_ID
        };
        
        this.ws.send(JSON.stringify({
            action: 'add_annotation',
            data: annotation
        }));
        
        return annotation;
    }
    
    // Handle incoming annotations
    handleAnnotation(data) {
        if (data.action === 'annotation_added') {
            this.annotations.push(data.annotation);
            this.renderAnnotation(data.annotation);
        }
    }
    
    // Render annotation on canvas
    renderAnnotation(annotation) {
        const canvas = document.getElementById('annotation-canvas');
        const ctx = canvas.getContext('2d');
        
        ctx.beginPath();
        ctx.arc(
            annotation.position.x,
            annotation.position.y,
            annotation.radius,
            0,
            2 * Math.PI
        );
        ctx.strokeStyle = '#ff0000';
        ctx.lineWidth = 2;
        ctx.stroke();
        
        // Add comment tooltip
        const tooltip = document.createElement('div');
        tooltip.className = 'annotation-tooltip';
        tooltip.style.left = `${annotation.position.x}px`;
        tooltip.style.top = `${annotation.position.y - 30}px`;
        tooltip.textContent = annotation.comment;
        document.body.appendChild(tooltip);
    }
    
    // Submit design for review
    async submitForReview(reviewers) {
        const response = await fetch(
            `${process.env.NEXT_PUBLIC_API_ENDPOINT}/reviews/submit`,
            {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${process.env.API_KEY}`
                },
                body: JSON.stringify({
                    design_id: this.designId,
                    reviewers: reviewers,
                    annotations: this.annotations
                })
            }
        );
        
        return await response.json();
    }
}

Common Patterns

Batch Design Generation

async function batchGenerate(prompts, baseOptions = {}) {
    const results = [];
    
    for (const prompt of prompts) {
        try {
            const variations = await AiPixelPerfect.generateDesign(prompt, {
                ...baseOptions,
                variations: 1 // Single variation per prompt for efficiency
            });
            
            results.push({
                prompt: prompt,
                design: variations[0],
                status: 'success'
            });
        } catch (error) {
            results.push({
                prompt: prompt,
                design: null,
                status: 'failed',
                error: error.message
            });
        }
        
        // Rate limiting: wait 1 second between requests
        await new Promise(resolve => setTimeout(resolve, 1000));
    }
    
    return results;
}

// Usage
const prompts = [
    'modern website hero image with gradient background',
    'product photography of smartwatch on wooden table',
    'abstract geometric pattern for textile design'
];

const designs = await batchGenerate(prompts, { resolution: 2048 });

Style Transfer Workflow

async function applyCustomStyle(prompt, styleId, options = {}) {
    const response = await fetch(
        `${process.env.NEXT_PUBLIC_API_ENDPOINT}/synthesize/styled`,
        {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${process.env.API_KEY}`
            },
            body: JSON.stringify({
                prompt: prompt,
                style_id: styleId,
                style_strength: options.styleStrength || 0.75,
                resolution: options.resolution || 2048,
                preserve_structure: options.preserveStructure || true
            })
        }
    );
    
    return await response.json();
}

// Create and apply custom brand style
async function createBrandStyle(brandName, referenceFiles) {
    const client = new AiPixelPerfectClient(process.env.AIPIXELPERFECT_API_KEY);
    
    // Create style from brand assets
    const style = await client.createStyle(
        `${brandName}-brand-style`,
        referenceFiles,
        { description: `Official brand style for ${brandName}` }
    );
    
    // Generate designs using the brand style
    const designs = await applyCustomStyle(
        'social media banner for product launch',
        style.id,
        { styleStrength: 0.8 }
    );
    
    return designs;
}

Progressive Refinement

async function progressiveRefine(initialPrompt, iterations = 3) {
    let currentPrompt = initialPrompt;
    let bestDesign = null;
    
    for (let i = 0; i < iterations; i++) {
        const variations = await AiPixelPerfect.generateDesign(currentPrompt, {
            variations: 4,
            seed: i * 1000 // Different seed each iteration
        });
        
        // Simulate selection (in real app, user would choose)
        bestDesign = variations[0];
        
        // Refine prompt based on result
        currentPrompt = await enhancePrompt(currentPrompt, bestDesign);
        
        console.log(`Iteration ${i + 1}: ${currentPrompt}`);
    }
    
    return bestDesign;
}

async function enhancePrompt(originalPrompt, designResult) {
    // Use AI to suggest prompt improvements
    // In practice, this would call a prompt enhancement endpoint
    return `${originalPrompt}, enhanced details, professional quality`;
}

Export Integrations

Figma Export

async function exportToFigma(designId, figmaFileKey, nodeId = null) {
    const response = await fetch(
        `${process.env.NEXT_PUBLIC_API_ENDPOINT}/export/${designId}`,
        {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${process.env.API_KEY}`
            },
            body: JSON.stringify({
                platform: 'figma',
                target_file: figmaFileKey,
                target_node: nodeId,
                figma_token: process.env.FIGMA_ACCESS_TOKEN,
                format: 'png',
                scale: 2
            })
        }
    );
    
    const result = await response.json();
    return result.figma_url;
}

Adobe Creative Cloud Export

async function exportToAdobe(designId, adobeProjectId) {
    const blob = await AiPixelPerfect.client.downloadDesign(designId, 'psd');
    
    const formData = new FormData();
    formData.append('file', blob, 'design.psd');
    formData.append('project_id', adobeProjectId);
    
    const response = await fetch(
        'https://api.adobe.io/cc/storage/upload',
        {
            method: 'POST',
            headers: {
                'Authorization': `Bearer ${process.env.ADOBE_ACCESS_TOKEN}`,
                'x-api-key': process.env.ADOBE_API_KEY
            },
            body: formData
        }
    );
    
    return await response.json();
}

Troubleshooting

Common Issues

Issue: Synthesis times out after 30 seconds

// Solution: Use async status polling for complex prompts
async function synthesizeWithPolling(prompt, options = {}) {
    const response = await fetch(
        `${process.env.NEXT_PUBLIC_API_ENDPOINT}/synthesize/async`,
        {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${process.env.API_KEY}`
            },
            body: JSON.stringify({ prompt, ...options })
        }
    );
    
    const { job_id } = await response.json();
    
    // Poll for completion
    while (true) {
        const status = await fetch(
            `${process.env.NEXT_PUBLIC_API_ENDPOINT}/jobs/${job_id}`,
            {
                headers: { 'Authorization': `Bearer ${process.env.API_KEY}` }
            }
        );
        
        const data = await status.json();
        
        if (data.status === 'completed') {
            return data.result;
        } else if (data.status === 'failed') {
            throw new Error(data.error);
        }
        
        await new Promise(resolve => setTimeout(resolve, 2000));
    }
}

Issue: Generated designs don't match prompt expectations

// Solution: Use detailed, structured prompts
function buildStructuredPrompt(subject, style, lighting, mood, details = []) {
    return [
        `Subject: ${subject}`,
        `Style: ${style}`,
        `Lighting: ${lighting}`,
        `Mood: ${mood}`,
        details.length > 0 ? `Details: ${details.join(', ')}` : ''
    ].filter(Boolean).join(' | ');
}

const prompt = buildStructuredPrompt(
    'corporate office interior',
    'modern minimalist',
    'natural daylight from large windows',
    'professional and welcoming',
    ['wooden desks', 'ergonomic chairs', 'green plants', 'clean lines']
);

Issue: Copyright conflict warnings on prompt

// Solution: Check prompt before synthesis
async function validatePrompt(prompt) {
    const response = await fetch(
        `${process.env.NEXT_PUBLIC_API_ENDPOINT}/validate/prompt`,
        {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${process.env.API_KEY}`
            },
            body: JSON.stringify({ prompt })
        }
    );
    
    const result = await response.json();
    
    if (result.conflicts && result.conflicts.length > 0) {
        console.warn('Potential copyright conflicts:', result.conflicts);
        console.log('Suggested alternatives:', result.alternatives);
        return false;
    }
    
    return true;
}

// Use before generation
const isValid = await validatePrompt('logo similar to Nike swoosh');
if (!isValid) {
    console.error('Prompt may infringe on existing IP');
}

Issue: Multilingual prompts not generating culturally appropriate designs

// Solution: Explicitly set language and cultural context
async function generateWithCulturalContext(prompt, language, region) {
    return await AiPixelPerfect.generateDesign(prompt, {
        language: language,
        cultural_context: region, // 'japan', 'latin_america', 'middle_east', etc.
        respect_local_aesthetics: true
    });
}

// Example: Japanese design
const jpDesign = await generateWithCulturalContext(
    '伝統的な日本の庭園',
    'ja',
    'japan'
);

Performance Optimization

Caching Strategy

class DesignCache {
    constructor() {
        this.cache = new Map();
        this.maxSize = 50;
    }
    
    getCacheKey(prompt, options) {
        return `${prompt}-${JSON.stringify(options)}`;
    }
    
    async getCached(prompt, options) {
        const key = this.getCacheKey(prompt, options);
        if (this.cache.has(key)) {
            const cached = this.cache.get(key);
            if (Date.now() - cached.timestamp < 3600000) { // 1 hour
                return cached.data;
            }
        }
        return null;
    }
    
    setCached(prompt, options, data) {
        const key = this.getCacheKey(prompt, options);
        
        if (this.cache.size >= this.maxSize) {
            const firstKey = this.cache.keys().next().value;
            this.cache.delete(firstKey);
        }
        
        this.cache.set(key, {
            data: data,
            timestamp: Date.now()
        });
    }
}

const designCache = new DesignCache();

async function generateWithCache(prompt, options) {
    const cached = await designCache.getCached(prompt, options);
    if (cached) {
        console.log('Returning cached design');
        return cached;
    }
    
    const result = await AiPixelPerfect.generateDesign(prompt, options);
    designCache.setCached(prompt, options, result);
    return result;
}

Configuration Reference

Resolution Presets

512: Quick preview (draft quality)
1024: Standard web graphics
2048: High-quality prints and presentations
4096: Professional photography replacement
8192: Large format prints and billboards

Style Weight Guidelines

0.0 - 0.3: Subtle style influence, prompt-dominant
0.4 - 0.6: Balanced style and prompt
0.7 - 1.0: Strong style application, may override prompt details

Language Codes

Use ISO 639-1 codes: en, es, fr, de, ja, zh, ar, hi, pt, ru, etc.

name	aipixelperfect-design-generator
description	AI-powered image generation platform for professional design creation with prompt-based synthesis and real-time collaboration
triggers	["generate AI design with AiPixelPerfect","create professional graphics using AI image generator","synthesize images from text prompts","use AiPixelPerfect for design work","integrate AI design generation into workflow","export AI-generated designs to design tools","configure AiPixelPerfect image synthesis","troubleshoot AI design generation issues"]

AiPixelPerfect Design Generator

Skill by ara.so — Design Skills collection.

Installation

Web Interface Access

Navigate to the hosted platform:

# Open the web interface
open https://abnormal-codex.github.io/Ai-Pixel-Design-Archive/

Create an account and authenticate via the UI

Local Development Setup

# Clone the repository
git clone https://github.com/abnormal-codex/Ai-Pixel-Design-Archive.git
cd Ai-Pixel-Design-Archive

# Install dependencies (Next.js based)
npm install

# Set up environment variables
cp .env.example .env.local
# Edit .env.local with your configuration

Environment Configuration

# .env.local
NEXT_PUBLIC_API_ENDPOINT=https://api.aipixelperfect.com
NEURAL_BACKEND_URL=https://synthesis.aipixelperfect.com
WEBSOCKET_SERVER=wss://collab.aipixelperfect.com
API_KEY=${AIPIXELPERFECT_API_KEY}
MAX_RESOLUTION=8192
DEFAULT_VARIATIONS=4

Core Concepts

Design Synthesis Workflow

Prompt Input → Descriptive text of desired image
Synthesis → Neural engine generates 4 variations
Selection → Choose best matching variation
Refinement → Adjust parameters with sliders
Export → Download or push to design tools

Supported Output Formats

Raster images: PNG, JPEG, WebP
Resolutions: 512px to 8K (8192px)
Color spaces: sRGB, Display P3
Transparency: Alpha channel support

Web Interface Usage

Basic HTML Integration

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AiPixelPerfect Design Generator</title>
    <link rel="stylesheet" href="styles/aipixel.css">
</head>
<body>
    <div id="synthesis-canvas">
        <div class="prompt-container">
            <textarea 
                id="design-prompt" 
                placeholder="Describe your design vision..."
                rows="3"
            ></textarea>
            <button id="synthesize-btn" onclick="generateDesign()">
                Synthesize
            </button>
        </div>
        
        <div id="variations-grid" class="hidden">
            <!-- Generated variations appear here -->
        </div>
        
        <div id="refinement-panel" class="hidden">
            <label>Brightness: 
                <input type="range" id="brightness" min="0" max="200" value="100">
            </label>
            <label>Contrast: 
                <input type="range" id="contrast" min="0" max="200" value="100">
            </label>
            <label>Saturation: 
                <input type="range" id="saturation" min="0" max="200" value="100">
            </label>
            <label>Style Weight: 
                <input type="range" id="style-weight" min="0" max="100" value="50">
            </label>
            <button onclick="applyRefinements()">Apply Changes</button>
        </div>
    </div>
    
    <script src="scripts/aipixel-core.js"></script>
</body>
</html>

JavaScript Core Functions

// scripts/aipixel-core.js

const AiPixelPerfect = {
    apiEndpoint: process.env.NEXT_PUBLIC_API_ENDPOINT,
    currentDesign: null,
    
    // Generate design from prompt
    async generateDesign(prompt, options = {}) {
        const response = await fetch(`${this.apiEndpoint}/synthesize`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${process.env.API_KEY}`
            },
            body: JSON.stringify({
                prompt: prompt,
                variations: options.variations || 4,
                resolution: options.resolution || 2048,
                style_weight: options.styleWeight || 0.5,
                language: options.language || 'en'
            })
        });
        
        if (!response.ok) {
            throw new Error(`Synthesis failed: ${response.statusText}`);
        }
        
        const data = await response.json();
        return data.variations;
    },
    
    // Refine selected design
    async refineDesign(designId, adjustments) {
        const response = await fetch(`${this.apiEndpoint}/refine/${designId}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${process.env.API_KEY}`
            },
            body: JSON.stringify({
                brightness: adjustments.brightness,
                contrast: adjustments.contrast,
                saturation: adjustments.saturation,
                style_weight: adjustments.styleWeight
            })
        });
        
        return await response.json();
    },
    
    // Export to external platform
    async exportDesign(designId, platform, options = {}) {
        const response = await fetch(`${this.apiEndpoint}/export/${designId}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${process.env.API_KEY}`
            },
            body: JSON.stringify({
                platform: platform, // 'figma', 'adobe', 'canva'
                format: options.format || 'png',
                maintain_layers: options.maintainLayers || false,
                target_project: options.targetProject || null
            })
        });
        
        return await response.json();
    }
};

// Example usage in UI
async function generateDesign() {
    const prompt = document.getElementById('design-prompt').value;
    const variationsGrid = document.getElementById('variations-grid');
    
    try {
        const variations = await AiPixelPerfect.generateDesign(prompt, {
            variations: 4,
            resolution: 2048
        });
        
        variationsGrid.innerHTML = '';
        variations.forEach((variation, index) => {
            const img = document.createElement('img');
            img.src = variation.url;
            img.alt = `Variation ${index + 1}`;
            img.onclick = () => selectVariation(variation.id);
            variationsGrid.appendChild(img);
        });
        
        variationsGrid.classList.remove('hidden');
    } catch (error) {
        console.error('Generation failed:', error);
        alert('Failed to generate design. Please try again.');
    }
}

function selectVariation(variationId) {
    AiPixelPerfect.currentDesign = variationId;
    document.getElementById('refinement-panel').classList.remove('hidden');
}

async function applyRefinements() {
    const adjustments = {
        brightness: document.getElementById('brightness').value / 100,
        contrast: document.getElementById('contrast').value / 100,
        saturation: document.getElementById('saturation').value / 100,
        styleWeight: document.getElementById('style-weight').value / 100
    };
    
    const refined = await AiPixelPerfect.refineDesign(
        AiPixelPerfect.currentDesign,
        adjustments
    );
    
    // Update preview with refined image
    console.log('Refined design:', refined.url);
}

API Integration

RESTful API Client

// api/aipixel-client.js

class AiPixelPerfectClient {
    constructor(apiKey, baseUrl = 'https://api.aipixelperfect.com') {
        this.apiKey = apiKey;
        this.baseUrl = baseUrl;
    }
    
    async request(endpoint, method = 'GET', body = null) {
        const options = {
            method,
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${this.apiKey}`
            }
        };
        
        if (body) {
            options.body = JSON.stringify(body);
        }
        
        const response = await fetch(`${this.baseUrl}${endpoint}`, options);
        
        if (!response.ok) {
            const error = await response.json();
            throw new Error(error.message || 'API request failed');
        }
        
        return await response.json();
    }
    
    // Generate designs from prompt
    async synthesize(prompt, options = {}) {
        return await this.request('/synthesize', 'POST', {
            prompt,
            variations: options.variations || 4,
            resolution: options.resolution || 2048,
            style_weight: options.styleWeight || 0.5,
            language: options.language || 'en',
            seed: options.seed || null
        });
    }
    
    // Get design status
    async getDesignStatus(designId) {
        return await this.request(`/designs/${designId}`);
    }
    
    // Download design
    async downloadDesign(designId, format = 'png') {
        const response = await fetch(
            `${this.baseUrl}/designs/${designId}/download?format=${format}`,
            {
                headers: {
                    'Authorization': `Bearer ${this.apiKey}`
                }
            }
        );
        
        return await response.blob();
    }
    
    // Create custom style
    async createStyle(name, referenceImages, options = {}) {
        const formData = new FormData();
        formData.append('name', name);
        formData.append('description', options.description || '');
        
        referenceImages.forEach((image, index) => {
            formData.append(`reference_${index}`, image);
        });
        
        const response = await fetch(`${this.baseUrl}/styles`, {
            method: 'POST',
            headers: {
                'Authorization': `Bearer ${this.apiKey}`
            },
            body: formData
        });
        
        return await response.json();
    }
    
    // List available styles
    async listStyles() {
        return await this.request('/styles');
    }
}

// Usage example
const client = new AiPixelPerfectClient(process.env.AIPIXELPERFECT_API_KEY);

async function generateAndExport() {
    const result = await client.synthesize(
        'minimalist logo for tech startup, blue and white color scheme',
        {
            variations: 4,
            resolution: 4096,
            styleWeight: 0.7
        }
    );
    
    console.log('Generated designs:', result.variations);
    
    // Download the first variation
    const blob = await client.downloadDesign(result.variations[0].id, 'png');
    const url = URL.createObjectURL(blob);
    console.log('Download URL:', url);
}

Collaboration Features

Real-Time Annotation System

// collaboration/annotations.js

class DesignAnnotation {
    constructor(websocketUrl, designId) {
        this.ws = new WebSocket(websocketUrl);
        this.designId = designId;
        this.annotations = [];
        
        this.ws.onmessage = (event) => {
            const data = JSON.parse(event.data);
            this.handleAnnotation(data);
        };
    }
    
    // Add annotation to design
    addAnnotation(x, y, radius, comment, type = 'circle') {
        const annotation = {
            design_id: this.designId,
            type: type,
            position: { x, y },
            radius: radius,
            comment: comment,
            timestamp: Date.now(),
            author: process.env.USER_ID
        };
        
        this.ws.send(JSON.stringify({
            action: 'add_annotation',
            data: annotation
        }));
        
        return annotation;
    }
    
    // Handle incoming annotations
    handleAnnotation(data) {
        if (data.action === 'annotation_added') {
            this.annotations.push(data.annotation);
            this.renderAnnotation(data.annotation);
        }
    }
    
    // Render annotation on canvas
    renderAnnotation(annotation) {
        const canvas = document.getElementById('annotation-canvas');
        const ctx = canvas.getContext('2d');
        
        ctx.beginPath();
        ctx.arc(
            annotation.position.x,
            annotation.position.y,
            annotation.radius,
            0,
            2 * Math.PI
        );
        ctx.strokeStyle = '#ff0000';
        ctx.lineWidth = 2;
        ctx.stroke();
        
        // Add comment tooltip
        const tooltip = document.createElement('div');
        tooltip.className = 'annotation-tooltip';
        tooltip.style.left = `${annotation.position.x}px`;
        tooltip.style.top = `${annotation.position.y - 30}px`;
        tooltip.textContent = annotation.comment;
        document.body.appendChild(tooltip);
    }
    
    // Submit design for review
    async submitForReview(reviewers) {
        const response = await fetch(
            `${process.env.NEXT_PUBLIC_API_ENDPOINT}/reviews/submit`,
            {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${process.env.API_KEY}`
                },
                body: JSON.stringify({
                    design_id: this.designId,
                    reviewers: reviewers,
                    annotations: this.annotations
                })
            }
        );
        
        return await response.json();
    }
}

Common Patterns

Batch Design Generation

async function batchGenerate(prompts, baseOptions = {}) {
    const results = [];
    
    for (const prompt of prompts) {
        try {
            const variations = await AiPixelPerfect.generateDesign(prompt, {
                ...baseOptions,
                variations: 1 // Single variation per prompt for efficiency
            });
            
            results.push({
                prompt: prompt,
                design: variations[0],
                status: 'success'
            });
        } catch (error) {
            results.push({
                prompt: prompt,
                design: null,
                status: 'failed',
                error: error.message
            });
        }
        
        // Rate limiting: wait 1 second between requests
        await new Promise(resolve => setTimeout(resolve, 1000));
    }
    
    return results;
}

// Usage
const prompts = [
    'modern website hero image with gradient background',
    'product photography of smartwatch on wooden table',
    'abstract geometric pattern for textile design'
];

const designs = await batchGenerate(prompts, { resolution: 2048 });

Style Transfer Workflow

async function applyCustomStyle(prompt, styleId, options = {}) {
    const response = await fetch(
        `${process.env.NEXT_PUBLIC_API_ENDPOINT}/synthesize/styled`,
        {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${process.env.API_KEY}`
            },
            body: JSON.stringify({
                prompt: prompt,
                style_id: styleId,
                style_strength: options.styleStrength || 0.75,
                resolution: options.resolution || 2048,
                preserve_structure: options.preserveStructure || true
            })
        }
    );
    
    return await response.json();
}

// Create and apply custom brand style
async function createBrandStyle(brandName, referenceFiles) {
    const client = new AiPixelPerfectClient(process.env.AIPIXELPERFECT_API_KEY);
    
    // Create style from brand assets
    const style = await client.createStyle(
        `${brandName}-brand-style`,
        referenceFiles,
        { description: `Official brand style for ${brandName}` }
    );
    
    // Generate designs using the brand style
    const designs = await applyCustomStyle(
        'social media banner for product launch',
        style.id,
        { styleStrength: 0.8 }
    );
    
    return designs;
}

Progressive Refinement

async function progressiveRefine(initialPrompt, iterations = 3) {
    let currentPrompt = initialPrompt;
    let bestDesign = null;
    
    for (let i = 0; i < iterations; i++) {
        const variations = await AiPixelPerfect.generateDesign(currentPrompt, {
            variations: 4,
            seed: i * 1000 // Different seed each iteration
        });
        
        // Simulate selection (in real app, user would choose)
        bestDesign = variations[0];
        
        // Refine prompt based on result
        currentPrompt = await enhancePrompt(currentPrompt, bestDesign);
        
        console.log(`Iteration ${i + 1}: ${currentPrompt}`);
    }
    
    return bestDesign;
}

async function enhancePrompt(originalPrompt, designResult) {
    // Use AI to suggest prompt improvements
    // In practice, this would call a prompt enhancement endpoint
    return `${originalPrompt}, enhanced details, professional quality`;
}

Export Integrations

Figma Export

async function exportToFigma(designId, figmaFileKey, nodeId = null) {
    const response = await fetch(
        `${process.env.NEXT_PUBLIC_API_ENDPOINT}/export/${designId}`,
        {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${process.env.API_KEY}`
            },
            body: JSON.stringify({
                platform: 'figma',
                target_file: figmaFileKey,
                target_node: nodeId,
                figma_token: process.env.FIGMA_ACCESS_TOKEN,
                format: 'png',
                scale: 2
            })
        }
    );
    
    const result = await response.json();
    return result.figma_url;
}

Adobe Creative Cloud Export

async function exportToAdobe(designId, adobeProjectId) {
    const blob = await AiPixelPerfect.client.downloadDesign(designId, 'psd');
    
    const formData = new FormData();
    formData.append('file', blob, 'design.psd');
    formData.append('project_id', adobeProjectId);
    
    const response = await fetch(
        'https://api.adobe.io/cc/storage/upload',
        {
            method: 'POST',
            headers: {
                'Authorization': `Bearer ${process.env.ADOBE_ACCESS_TOKEN}`,
                'x-api-key': process.env.ADOBE_API_KEY
            },
            body: formData
        }
    );
    
    return await response.json();
}

Troubleshooting

Common Issues

Issue: Synthesis times out after 30 seconds

// Solution: Use async status polling for complex prompts
async function synthesizeWithPolling(prompt, options = {}) {
    const response = await fetch(
        `${process.env.NEXT_PUBLIC_API_ENDPOINT}/synthesize/async`,
        {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${process.env.API_KEY}`
            },
            body: JSON.stringify({ prompt, ...options })
        }
    );
    
    const { job_id } = await response.json();
    
    // Poll for completion
    while (true) {
        const status = await fetch(
            `${process.env.NEXT_PUBLIC_API_ENDPOINT}/jobs/${job_id}`,
            {
                headers: { 'Authorization': `Bearer ${process.env.API_KEY}` }
            }
        );
        
        const data = await status.json();
        
        if (data.status === 'completed') {
            return data.result;
        } else if (data.status === 'failed') {
            throw new Error(data.error);
        }
        
        await new Promise(resolve => setTimeout(resolve, 2000));
    }
}

Issue: Generated designs don't match prompt expectations

// Solution: Use detailed, structured prompts
function buildStructuredPrompt(subject, style, lighting, mood, details = []) {
    return [
        `Subject: ${subject}`,
        `Style: ${style}`,
        `Lighting: ${lighting}`,
        `Mood: ${mood}`,
        details.length > 0 ? `Details: ${details.join(', ')}` : ''
    ].filter(Boolean).join(' | ');
}

const prompt = buildStructuredPrompt(
    'corporate office interior',
    'modern minimalist',
    'natural daylight from large windows',
    'professional and welcoming',
    ['wooden desks', 'ergonomic chairs', 'green plants', 'clean lines']
);

Issue: Copyright conflict warnings on prompt

// Solution: Check prompt before synthesis
async function validatePrompt(prompt) {
    const response = await fetch(
        `${process.env.NEXT_PUBLIC_API_ENDPOINT}/validate/prompt`,
        {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${process.env.API_KEY}`
            },
            body: JSON.stringify({ prompt })
        }
    );
    
    const result = await response.json();
    
    if (result.conflicts && result.conflicts.length > 0) {
        console.warn('Potential copyright conflicts:', result.conflicts);
        console.log('Suggested alternatives:', result.alternatives);
        return false;
    }
    
    return true;
}

// Use before generation
const isValid = await validatePrompt('logo similar to Nike swoosh');
if (!isValid) {
    console.error('Prompt may infringe on existing IP');
}

Issue: Multilingual prompts not generating culturally appropriate designs

// Solution: Explicitly set language and cultural context
async function generateWithCulturalContext(prompt, language, region) {
    return await AiPixelPerfect.generateDesign(prompt, {
        language: language,
        cultural_context: region, // 'japan', 'latin_america', 'middle_east', etc.
        respect_local_aesthetics: true
    });
}

// Example: Japanese design
const jpDesign = await generateWithCulturalContext(
    '伝統的な日本の庭園',
    'ja',
    'japan'
);

Performance Optimization

Caching Strategy

class DesignCache {
    constructor() {
        this.cache = new Map();
        this.maxSize = 50;
    }
    
    getCacheKey(prompt, options) {
        return `${prompt}-${JSON.stringify(options)}`;
    }
    
    async getCached(prompt, options) {
        const key = this.getCacheKey(prompt, options);
        if (this.cache.has(key)) {
            const cached = this.cache.get(key);
            if (Date.now() - cached.timestamp < 3600000) { // 1 hour
                return cached.data;
            }
        }
        return null;
    }
    
    setCached(prompt, options, data) {
        const key = this.getCacheKey(prompt, options);
        
        if (this.cache.size >= this.maxSize) {
            const firstKey = this.cache.keys().next().value;
            this.cache.delete(firstKey);
        }
        
        this.cache.set(key, {
            data: data,
            timestamp: Date.now()
        });
    }
}

const designCache = new DesignCache();

async function generateWithCache(prompt, options) {
    const cached = await designCache.getCached(prompt, options);
    if (cached) {
        console.log('Returning cached design');
        return cached;
    }
    
    const result = await AiPixelPerfect.generateDesign(prompt, options);
    designCache.setCached(prompt, options, result);
    return result;
}

Configuration Reference

Resolution Presets

512: Quick preview (draft quality)
1024: Standard web graphics
2048: High-quality prints and presentations
4096: Professional photography replacement
8192: Large format prints and billboards

Style Weight Guidelines

0.0 - 0.3: Subtle style influence, prompt-dominant
0.4 - 0.6: Balanced style and prompt
0.7 - 1.0: Strong style application, may override prompt details

Language Codes

Use ISO 639-1 codes: en, es, fr, de, ja, zh, ar, hi, pt, ru, etc.

aipixelperfect-design-generator

同仓库更多 Skills

同仓库更多 Skills

AiPixelPerfect Design Generator

Installation

Web Interface Access

Local Development Setup

Environment Configuration

Core Concepts

Design Synthesis Workflow

Supported Output Formats

Web Interface Usage

Basic HTML Integration

JavaScript Core Functions

API Integration

RESTful API Client

Collaboration Features

Real-Time Annotation System

Common Patterns

Batch Design Generation

Style Transfer Workflow

Progressive Refinement

Export Integrations

Figma Export

Adobe Creative Cloud Export

Troubleshooting

Common Issues

Performance Optimization

Caching Strategy

Configuration Reference

Resolution Presets

Style Weight Guidelines

Language Codes

AiPixelPerfect Design Generator

Installation

Web Interface Access

Local Development Setup

Environment Configuration

Core Concepts

Design Synthesis Workflow

Supported Output Formats

Web Interface Usage

Basic HTML Integration

JavaScript Core Functions

API Integration

RESTful API Client

Collaboration Features

Real-Time Annotation System

Common Patterns

Batch Design Generation

Style Transfer Workflow

Progressive Refinement

Export Integrations

Figma Export

Adobe Creative Cloud Export

Troubleshooting

Common Issues

Performance Optimization

Caching Strategy

Configuration Reference

Resolution Presets

Style Weight Guidelines

Language Codes