aipixelperfect-design-generator
AI-powered image generation platform for professional design creation with prompt-based synthesis and real-time collaboration
معلومات المصدر
- المستودع
- reason-machines/design-skills
- آخر نشاط في المصدر
- ٣٠ يونيو ٢٠٢٦ في ٢٢:٢٧
- لغة SKILL.md المكتشفة
- الإنجليزية
- النجوم
- ٤
- التفرعات
- ٠
خيارات التثبيت
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
مراجعة ملفات المصدر
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
عرض SKILL.md
SKILL.md
تعليمات المصدر · معاينة للقراءة فقط- 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](https://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
1. Navigate to the hosted platform:
```bash
# Open the web interface
open https://abnormal-codex.github.io/Ai-Pixel-Design-Archive/
```
2. Create an account and authenticate via the UI
### Local Development Setup
```bash
# 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
```bash
# .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
1. **Prompt Input** → Descriptive text of desired image
2. **Synthesis** → Neural engine generates 4 variations
3. **Selection** → Choose best matching variation
4. **Refinement** → Adjust parameters with sliders
5. **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
```html
<!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
```javascript
// 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
```javascript
// 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
```javascript
// 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`;
عرض على GitHubملف SKILL.md هذا كبير جدا، لذلك يعرض SkillsMP القسم الاول فقط هنا. عرض على GitHub
